当前位置:首页WP美化B2美化【7B2主题美化】首页N格样式

【7B2主题美化】首页N格样式

仅限于7B2主题,其他主题自行修正。

1.将下列代码放至模块自定义区域(主题设置-模块办理-自定义)

  1. <!-- 主页N格区块html代码 开端 -->
  2. <div id="home-row-qr - [ukuB = n ! m p :ai" class=" home_row home_row_1 module-qukuai " style="background-color:;">
  3. <div class="wrapper">
  4. <div c# _ ) \ q \lass="home-row-left content-area ">
  5. <div class="soT } Srt b2-radius" style="margin-top:-100px ;">
  6. <ul class="sort-config">
  7. <l4 V [ } n 7i: : &>
  8. <div class="sort-config-item">
  9. <img class="sort-config-icon" src="https://www.guidebook.top/images/V 8 O 1 \ J 3 Zlogo.svg" alt="" />
  10. <a href="https://nav.guidebookH Y a \ & ( M.tx . l U e k Top" targeu C o . ; i :t="_blank">&ltw Z U @ a;p class="sort-config-title">数字攻略手册
  11. <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  12. </p> </a&gt$ j _ m;
  13. <span clak T 9 z e Vss="sort-config-desc">高效工, y ! @ x B C j Y作学习生活手册</span>
  14. </div></li> <li>
  15. <div class="sort-config-item">
  16. <img class="sort-config-icon" src="https://www.guidebook.n P 9 9 \ i ?top/images/search.svg" alt="" />
  17. <a hrefG 5 c="htb 0 H 1 V 2 $tps://search.guidebook.top" target="_blank"><p class="sort-Q U ? Z T d & nconfig-title">搜索攻略
  18. <span class="go" style="background-color: #5de000;">GO&ltj 8 , W ) e z;i class="b2font b2-arro. ~ n 5 V U L &w-ri6 E a 0 B u F jght-s-line"></i></span>
  19. </p> </a>
  20. <span class="sort-config-desc">聚合U K y W ; C搜索引擎</span>
  21. </di[ O K _v></li> <li>
  22. <div class="Z | j I Q + l d nsort-a q n H W P # H Kconfig-item"&g@ X 0 l } d K 1 @t;
  23. <img class="sort-cons & / H @ ~fig-icon" src="https://www.guidJ O w uebook.top/imj G x m |ages/danghui.svg" alt="" />
  24. <a href="https://www.guidebook.top" target="_blank"><p class="sort-config-title">公函写作
  25. <span class="go" style="background-color: #ff6000;">GO<i cR { X J c 3lass=N 8 S U & f q"b2font b2-arrow-right-s-line"></il j @></sZ T i 0 J |pan>
  26. </p&8 a ( b ; % Sgt; </a>
  27. <span class="sortb S z-config-desc">写作素材搜集</span% R ! ! B>
  28. </div></li> <li>
  29. <div class="sort-config-item">
  30. <img class="sort-config-icon" src="https://www.guidebook.top/images/news.svg"N Q 3 alt="" /&gZ d W L xt;
  31. <a href="^ b N 8 ! X mhttps://nav.guidebook.top/hotnews/" target="_blank">&lv v \ X M n % Xt;p class="soK G L ) ^ T 4 art-config-title">今天资讯
  32. <span class="go" style="bacE 7 \ b ` Y L - Ukground-co8 r . 2 l i : | Flor: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></F T L d g li></span&; % . s I + &gt;
  33. </p> </a>
  34. <span class="ss Z 5 7 } x ;o; l D 3 e y ert-config-desc">每日新闻速递</span>
  35. </div></li> <li&g; 9 (t;
  36. <div class="sort-config-item">
  37. <img class="sortb V [-c0 ^ Z : j Q 2 W Yonfig-icon" src="https:h J 0//www.guidebook.top/images/he@ f k V =zuoanli.s0 K ! \ ` ^ r Wvg" alt="" />
  38. <a href="/requests" target="_blank"><p class="sort-config-title">项目库
  39. <span class="go" style="backgrB q L Dound-color: #ff6m P ~ % 2 + H @ %000;"&gtj - d g .;GO<i classO H h ? 7 N o 2="b2font b2-arrow-right-s-line"&g: ` \t;</i>&ltU 4 u Y;/span&gt\ . : h ( u # F;
  40. </p> <1 i 8/a>
  41. <spanq U \ H ] k class="sort-config-desc">优秀项目列表</span>
  42. </div></li> </ul>
  43. <div class="sort-F n r F A ( J 3 Hblocks">
  44. <div class="bt-body">
  45. <div class7 i G a="containerrr">
  46. &lte ? j v C 4;div class="onecad-quk-carousel">
  47. &lt\ O Q * + P 6 W (;div class="iteO E h = &mss">
  48. <a class="ca\ v t @ . 3 2rd_ZQs] n : S Y ` { F eT- b2-radius" href="https:/G E = 5 ] r M u E/www.guidebook.top/337/" targe| 1 7 8 0 0t="_blank">
  49. <img sb : = H c U } Orc="- @ f h ^ 7 O B )https://www.guidebook.to] t N b Dp/imagd B 7 | ~ , 2es/shetuwang.png">
  50. </a><a class="cardz M z p ! Q l a_ZQsT- b2-radius" href="http://nav.guidebook.top" target="_blank">
  51. <img src="https://www.guidebook.top/images/wxgzh1.png">
  52. &lt/ / |;/G Z X I V j w P Ba>
  53. <a class="card_ZQsT- b2-radius" href="https://nav.guidebook.top" target="_blank">
  54. <i] w c r ) - ( \mg src="https://www.guidebook.top/image] [ e z 7 ] os/101.jpg">
  55. </a>
  56. </P q [ } ) + Q g rd: + o - r Oiv&g[ ) k S K %t;
  57. </1 , D / d ! o t odiv>
  58. </div>
  59. </div>
  60. <div cE 2 U j 9lass="srot-mine b2-radius">
  61. <div class="wwads-cn wwads-horizonty H @ j ~ * I ( fal" data-id="147" stylee P ) l | w="width:376px; height:180px;flex-wrap:nowrap;margin-top:0px;background-color:azurc R r s t j r o se;padding:0px;"></div>
  62. </dO R h p T S } I 4iv>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <J 8 k E D I b + }!-- 主页N格区块html代码 开端 -->

2.将下列代码放至WP主题额定CSS中(WP后台-外观-自定义-额定css)

  1. /*主r n _ ; A 5 n 0页N格样式代码开端*/
  2. /*角标CSS*/
  3. .jiaobiao_color1{
  4. color:#fff;
  5. background-color:#03bbff;
  6. }
  7. .jiaW W y i Y =obiao_color2x ~ Z d{
  8. color:#fff;
  9. background-color:#ca26ff;
  10. }
  11. .jiaobiao_color3{
  12. color~ 9 m Q ~ e p N:#fff;
  13. background-color:#7bdcb5;
  14. }
  15. .jiaobt O F J hiao_color4{
  16. color:#fff;
  17. background-color:#ff2a8e;
  18. }
  19. .jiaobiao_color5{
  20. color:#fff;
  21. background-color:#ff8f21;
  22. }
  23. .jiaobiao_cz x 6 8 M } o a 0olor6{
  24. color:#fff;
  25. background-color^ E y j ! T:#10e396;
  26. }
  27. .tipss,.meta-post-type {
  28. position: abs\ s ~ = . colute;
  29. top: 0px;
  30. rightb k & D 5 1 & x t: -64px;
  31. z-index: 1;
  32. width: 150px;
  33. height: 22px;
  34. color: #fff;
  35. line-height: 25px;
  36. -webkit-transform: rotate(45deg);
  37. transform: rotate(45deg);
  38. text-align: center;
  39. font-size: 12px;
  40. }
  41. .yellow {
  42. background-color: var(--# 0 l : mb2color);
  43. }
  44. .sort {
  45. position: relative;
  46. z-index: 3;
  47. pad. Z C }ding:R x V % * ` 26px;
  48. background: #fff;
  49. /* border: 1px solid #797c80; */
  50. /* -webkit-box-shadow: 0 40px 75px 0 rgba(57,60,67,.08)i B g 9; */
  51. /* box-s! ] k I ` [ -hadow: 0 40px 75px 0 rgba(57,60,67,.08); */
  52. -webkit-backdrop-filter: blur(10px+ U z y ! A);
  53. backdrop-filter: blur(10px);
  54. }
  55. .sort-config {
  56. display: -webkit/ { 5 , b *-box;
  57. display: -ms-flek _ #xbox;
  58. display: flex;
  59. -webkitm P b :-box-pack: justify;
  60. -ms-[ , $ e . l C 5flex-pack: justify;
  61. justify-content: space-between;
  62. }
  63. .main {
  64. width: 1410px;
  65. margin: 0 auto;
  66. padding-bottom: 40px;
  67. }
  68. .sort-config>li {
  69. -webkit-box-flex: 1;
  70. -ms-D ^ Z M % 2flex: 1;
  71. flex: 1;
  72. overflow: hidden;
  73. height: 100%;
  74. }
  75. .ibanner-tips-float {
  76. position: absolute;
  77. top: -70px} & [ W;
  78. left: 1096px;
  79. z-index: 24;
  80. }
  81. .sort-config-item {
  82. display: bl[ v I B K h ~ Aock;
  83. height: 100%;
  84. }
  85. .so. 3 H } *rt-config-item img {
  86. float: left;
  87. width: 62px;
  88. height: 62px;Y L ) j =
  89. margin-right: 12px;
  90. }
  91. .sort-config-ti^ ] % 0 H l } A 1tle {
  92. line-S M _ r s + _ :hN M r i C u { 4eight: 34px;
  93. font-size: 18px;
  94. font-weigh+ q + % 8 | * + !t: 600;
  95. color: #2d2d2d;
  96. -6 , iwebkit-transition: .3s;
  97. transition: .3s;
  98. }
  99. .sort-config-desc {
  100. float: left;
  101. line-a | e 9 T o s h hheight: 22px;
  102. font-size: 14px;
  103. color: #8e8e8e;
  104. }
  105. .sort-blocks {
  106. display: -webkit-box;
  107. display: -ms-flexbox;
  108. display: flex;
  109. -webkit-box-pack: justify;
  110. -ms-flex-pack: justify;
  111. justify-content: space-between;
  112. height: 100%;
  113. margin-top: 35px;
  114. }
  115. .sortA % Y E # g m-blocks-item {
  116. position: relative;
  117. overflow: hidden;
  118. width: 214px;
  119. height: 100%;
  120. background: #f7f9fa;
  121. border-radius: 14px;
  122. }
  123. .sort-bl2 q c y 9ocksN S \ 2 J d b N w-item .blocks-item-wrap {
  124. -webkit-transition: .3s;
  125. transition: .3s;
  126. -webkit-filt\ @ H _ o i 9 Ger: none;
  127. filter: none;
  128. }
  129. .so0 ` 4 a ~ P \rt-blocks-icon {
  130. display: block;
  131. width: 60px;O j H 6 M I [ &
  132. height: 47px;
  133. margi` ; ~ ] _ dn: 18px auto 15px;
  134. backgro( i 2 4 j ) X lund-repeatS ~ Y C A a D: nox h $ 8 0 Z x . I-repeat;
  135. b| F 5 G \ wackground-size: cover;
  136. }
  137. .sort-blocks-title {f 3 t ! H x J k
  138. line-height: 22pn R / [ E z ]x;
  139. fonA r U F _t-size: 22px;
  140. font-weight: 600;
  141. color: #2d2d2d;
  142. letter-spacing: 1H Z C _ R , Zpx;
  143. text-a^ ? ! N $lign: center;
  144. }
  145. .* $ g C - ) 6 Rsort-mine-wrap img {l + p ( B F [ c
  146. display: flex;
  147. width: auto;
  148. }
  149. .sort-config-title .go2 K = r {
  150. borf z e }der-radius: 4px;
  151. color: #ffffff;
  152. font-size: 13pE p : \ 3 X p M [x;
  153. -webkit-transform: scale(.9);
  154. -ms-trE d } Tansform: scale(.9);
  155. transform: scale(.9);
  156. font-weight: normal;
  157. padding: 2px 5px;
  158. position: absolute;
  159. line-height:c m a V ) 15D _ s Ipx;
  160. margin-left: 5px;
  161. cursor: pointer;
  162. text-tranV V J gsfor5 m w 1 W 4m: uppercase;
  163. vertical-align: middle;
  164. margin-top: 7px;
  165. }
  166. .s- t 9 * _ ( y aort-blocks-item .blocks-hover, .sort-blocks-item .blocks-hover-title {
  167. position: abs% f \ kolute;
  168. top: 0;
  169. width: 100%;
  170. color: #fff;
  171. text-align: center;
  172. line-height: 22px;
  173. }
  174. .sort-block. e , $s-item .blocks-hover {
  175. left: 0;
  176. height: 100%;
  177. padding-top: 22px;
  178. font-size: 14px;
  179. background: rgba(0,0,0,.4);
  180. -webkit-transition: .3s;
  181. traO C Q mnsition: .3s;
  182. opacity: 0;
  183. }
  184. .sort-blocks-item .blocks-hover-tit {
  185. line-height: 18px;
  186. fo[ \ d E U 7 m o wnt-size: 18px;W j \ g 8 c 1 Z
  187. }
  188. .sort-blocks-item .blocks-hover-line {
  189. width: 158px;
  190. height: 1px;
  191. margin: 12px auto 8px;
  192. background: -webkit-gradient(linear,left top,right top,from(h. + nsla(0,0%,1[ ? y00%,0)),color-stop(30%,hsla(0,0%,100%,.7)),color-stop(70%,hsla(0,0%,100%,.7)),tW 8 t l m 0 j ~o(hsla(0,0%,100%,.1)));
  193. background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7) 30%9 V P , X x & z,hsla(0,0%,100%,.7) 70%,hsla(0,0%,100%,.1));
  194. }
  195. .srot-mine {
  196. position: r9 S @ 2 z xelative;
  197. width: 376px;
  198. background:s V T R 4 -webkit-gradient(linear,left top,right top,from(#fdf8eb),to(#G j $ $ | a % M 5feee7 ] m 7 4 * [ |c3));
  199. background: linear-gradient(90deg,#fdf8eb. c & 0 F . S,#feeec3);
  200. height: 180px;
  201. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
  202. }
  203. .srot-mine-bg {
  204. position: absolute;
  205. top: 13px;
  206. right: -13px;
  207. width: 118px;
  208. height: 78px;
  209. background: url(./Center/Assets/images/sort_zuanshi.png) no-repeat;
  210. background-size: cover;
  211. }
  212. .sort-m( t ) ] % Kine-wrap {
  213. position: absolute;
  214. left: 0;
  215. top: 0;
  216. z-index: 1;
  217. width: 100%;
  218. height: 100%;
  219. padding: 12px 16px 15px;
  220. }
  221. .srot-mine-titd f F I % e {
  222. display: -webkit-box;
  223. display: -ms-flexbox;
  224. display: flex;
  225. line-hei% q j k sght: 25px;
  226. }
  227. .srot-mine-ava {
  228. width: 20px;
  229. height: 20px;
  230. border-radius: 50%w d r e p;
  231. }
  232. .srot-mine-tit>span {
  233. margin-left: 9px;
  234. font-size: 15px;
  235. font-we| { g H J m t j Fight: 600;
  236. color: #613c14;
  237. }
  238. .srot-mine-vips {
  239. display: flex;
  240. -webkit-box-pack: justify;
  241. justify-content: space-between;
  242. width: 337px;
  243. margin: 15px 0px 5px;
  244. }
  245. .sort-vips-item {
  246. d! t d ` X t 9 Gisplay: block;
  247. -webkit-box-flex: 1;
  248. -ms-fl^ ) N @ x zex: 1;
  249. flex: 1;
  250. text-align: center;
  251. }
  252. .d s , vsort-vips-icon {
  253. display: block;~ + f n ) 6 p j
  254. width: 32px;
  255. height: 3p - u + K F6px;
  256. margin: 0 auto;
  257. -webkit-transition: .3s;
  258. transitioO k E . o R U 4 nn: .3s;
  259. margin-left: 30px;
  260. }
  261. .sort-vips-tit {
  262. margin: 15px 0px;
  263. line-heigd P q e % o I u 2ht: 12px;
  264. font-size: 13px;
  265. con i . vlor: #t ` f )613c14;
  266. margin-left: 10px;
  267. }
  268. .sd Y d Vort-vips-tit2-kt {
  269. margin-top: 10px;g } y V T =
  270. lineL K * _ V T (-height: 12px;
  271. did z Q . Asplay: flex;
  272. justify-content: cent; ] 2 _er;
  273. align-it; 2 D h U & P kems: center;M \ 7 p V
  274. height: 25{ @ W 4 upx;
  275. color: #ffffff;
  276. border-radius: 33p5 u R g a G 5 S Ix;
  277. margin-right: 10px;
  278. font-size: 14px;
  279. background-image: linear-gradient(90deg,#ffc046,#ff7d04);
  280. margin: 10px 0px 0px 9px;
  281. }
  282. .s9 p o 0 ^ort-vips-tit2-wk {
  283. margin-top: 10px;
  284. line-height: 12px;
  285. display: fleK L l 9 B 1 E +x;
  286. justify-content: center;
  287. alig% x y : ( * ]n-items: center;
  288. height: 25px;
  289. color: #ffffff;
  290. bordy n K ^ ( \ ferD n i b 9 M Y %-radius: 33px;
  291. margi? n I T x s L Dn-right: 10px;
  292. font-size: 14px;
  293. opacity: 0.5;
  294. backgroj s Q x Qund: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%); background-blend-mode: multiply;
  295. margin: 13 * g l : b a0px 0px 0px 9px;
  296. }
  297. .bt-body {m o p ^ c X b 0
  298. padding-bottom: 0px;
  299. background: transparent;
  300. width: calc(100% - 376px);
  301. }
  302. .b-boxs .video .s-pic{height: 189px;}
  303. .b-boxs .video .video-view {height: 186px;width: 337px; overflow: ha Q ( & b |id1 g { yden; cursor: pointer;display: block;}
  304. .b-boxs .video:hover .J . 3 e R & ^ =video-view .img-none{displJ p O } Z +ay: none;}
  305. .b-boxs .video .video-view video{width: 337px;}
  306. .b-boxs .video:hover .video-view video{display: block;}
  307. .b-boxs .video .mark{height: 189px; display:o u m / H 5 none;}
  308. .b-boxs .video:hover .mark{display: none;}
  309. .b-boxs .video .v-down{
  310. poI E F $ s ?sition: absolute;
  311. top: 12px;
  312. left: 57%;
  313. z-index: 2;
  314. marg2 b H ) ` :in-left: 65px;
  315. p| S i / .adding-left: 21px;
  316. width: 45px;
  317. height: 31px;
  318. border-W w ( % fradius: 2px;
  319. background: url(./Center/Assets/images/vid- / Feo.png) -8px -77px no-repeat #007aff;
  320. color: #fff;
  321. font-size: 20px;
  322. font-size: 14px;
  323. line-height: 31px;
  324. opacity: 0;
  325. cursor: pointer;
  326. -moz-opacity: 0;
  327. -khtml-opaciti w = M d R ~y: 0;
  328. }
  329. .b-boxs .video .v-down:hover {
  330. background: url() -5px -77px no-repeat #6e91e6;
  331. }
  332. .b-boxs .Y 5 } /vide} a t A ; [ ! j Zo .v-collect{
  333. widO 2 Lth: 31px;
  334. height: 31px;
  335. line-height: 31px;
  336. position: absolute;
  337. left: 58%;
  338. top: 12px;
  339. margin-left: 23px;
  340. color: #333;
  341. font-size: 20px;
  342. border-radius: 2px;
  343. z-index: 2;B R 6 4 ^ ~ s
  344. background: url(./Center/Assety D C ; ~ L 0s/images/viC q B m xdeo.png7 m .) -11px 5px no-repeat #fff;
  345. padding-left: 0px;d a r
  346. cu\ / ( \ -rsor: pointer;
  347. filter: alpha(opacityL K a=0);
  348. ilterd _ r x: alphaP [ Q !(opacity=0);
  349. -moz-opacity: 0;
  350. -kk 2 ; . + j } _html-opaciF L j Ety: 0;
  351. opacity: 0;
  352. font-size: 17px;
  353. letter-spacing: 7px;
  354. }
  355. .b-boxs .video2 } + L W = f:hover .v-collect,.b-boxs .video:hover .v-down{
  356. filter: alpha(opacity=1);
  357. ilter: alpha(opacity=1);
  358. -) = Y #moz-opacT P ] V r Tity: 1;
  359. -khtml-opacity: 1;
  360. opacity: 1;
  361. }
  362. .b-boxs .video .4 d v P , Y F /chosed{
  363. background: u. \ f C grl(./Center/Assets/images/video.png) -11px -36px no-repeat #fff;
  364. }
  365. .b-boxs .video .titN t c : T Mle {
  366. position: absolute;
  367. bottom: 0px;
  368. left: 0px;
  369. widt, 1 ; M 9 3 )h:? ) - V & Y P | 318 x w6px;
  370. heigh4 V ht: 30px;
  371. line-height:, i U E Z + % m 30pxq j N r Y;
  372. color: #ffffff;
  373. text-align: left;
  374. z-index: 1;
  375. overflow: hidden;
  376. white-space: not R w + 8 ? 9 8wrap;
  377. -o-text-overflow: ellipsis;
  378. tex6 V p s 3 _ m \ Pt-ove& : - D /rflow: ellipsis;
  379. font-size: 12px;
  380. background: #00000075;
  381. background-color: #1677ff00;
  382. background-image: lio ; k ; _near-grS { D u 9 q p F tadient(-90deg, #00000000, #000000);
  383. }
  384. .b-box .audio-box {
  385. width: 340px;
  386. height: 160px;
  387. float: left;
  388. margin-right: 16px;
  389. margin-bottom: 16px;
  390. margin-top: 0px;
  391. posite L :ion: relative;6 } 8 9 ;
  392. overf: j H 0 2low: hidden;
  393. box-shadow: 0 0px 9pxb \ I rgba(0,0,0,.1);
  394. background: #ffffff;
  395. box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  396. border-radius: 10px;
  397. }
  398. .b-boxs .video:hover .video-b| ^ N i _ Z \ O Gq,.b-boxl J e M \ ? es .video:hover .title{
  399. display: none;
  400. }
  401. .b-boxs .video:hover .mc-bottom{
  402. display:none;
  403. }
  404. .b-boxs .video .mc-bottom{Q r m j ~ g
  405. display: inline-block;
  406. positiop / 9 u fn: absolute;
  407. width: 100%;
  408. height: 32%;
  409. left: 0;
  410. bott} . X t P o [ rom: 0;
  411. background: #000;
  412. opacity: .4 \9 \0;
  413. background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .p E _ = l ^ `4) 0, tr, z ranI & % ` Y L Tsparent 100%);
  414. b% G e M i background: -webkit-k a o rgradientN v k(linear, bottom, top, color-stop(0,) \ p o - g A rX N ?gba(( 7 c P ` H0, 0, 0, .4)), color-stop(100%, transparent));
  415. background: -webkit-linear-gradZ U n / W O @ient(bottom, rgW m F p X y K k Nba(0, 0, 0, .4) 0, transparent 100%);
  416. background: -o-linear-gradien0 ~ : 4 I z It(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
  417. background: -ms] ^ H 6 7 o-linear-gradient(bottom, rgba(0, 0,@ X C M / L 0, .4) 0, transparent 100%);
  418. background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .4)), to(transparent));
  419. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
  420. background: -webk= : } | c C 4 nit-gradient(linear, left bottom, lc 9 d ~ Ieft top, color-sf E $ O o 0 S E mtop J 5 m Ip(0, rgba(0, 0, 0, .4)), to(transparent));
  421. backgr\ . n { ;ound: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(tJ V / . , m & y ]ransD i Sparent));
  422. background: -webkit-gradien@ Z N N k S 9t(linear,d 0 X H m f 2 * lB A $ h } C } qeft bottom, left top, color-stoB H Q e w l U 9 Dp(0, rgba(0, 0, 0, .4)), to(transparent));
  423. background: linear-gradient(to toW b (p, rg^ f wba(0, 0, 0, .4) 0,1 w f ` transparent 100%)k ( u;
  424. filter: progid:DXImageTransform.Microsofti d 5 ; \ V.gradC 9 ] y l 0 ! rient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
  425. -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstB G v _ Jr=#000000,G R A B ) ) 4 l # endColorstr=#ffffff)";
  426. }
  427. .good-ppt {
  428. width: 100%X r = k E T W;
  429. }
  430. .topic-titl; 5 T \ A Z +e {
  431. height: 41px;
  432. color: #484747;
  433. text-align: left;
  434. }
  435. .wlimits {
  436. margin-rig\ - , W / 2 }ht: -59px;
  437. }
  438. .topic-} C ] G : /title .jptitle {
  439. display: inline-block;
  440. width: 280px;
  441. color: #000;
  442. letA [ J / { ` ~ }ter-spacing: 22 m \ ` i & u -px;
  443. font-size: 24px;
  444. }
  445. .topic-title .jptit: ; G { U ~ /le .shiping {
  446. display: inline-block;
  447. width: 87px;
  448. height: 63px;
  449. background: url(../image/tb.png) 0px -345px no-re2 E T p m + u ppeat;
  450. vertical-align: -23px;
  451. }
  452. .C l /topic-title ul {
  453. display: inline-block;
  454. floP o o A P 1at: right;
  455. }
  456. .topic-title ul li {
  457. display: inline-block;
  458. }
  459. .topic-title ul li a {
  460. display: inline-block;
  461. margin-right: 6px;
  462. padding: 0 10px;
  463. height: 35px;
  464. /* border: 1px solid #e5e5e5; */
  465. /* backgror } [ p C y - iund: #fff; */
  466. color: #606060;
  467. fontY 7 $ p J | 7 C-size: 14px;
  468. line-height: 35px;
  469. }
  470. .\ P 5 $topic-title uO 1 $ \ o ] ` Hl lG A % * e * ^ Y }i em {
  471. display: inline-block;
  472. height: 14px;
  473. width: 1px;
  474. background: #b7b7b7;, i e ] O t [ E b
  475. vertical-align: -2px;
  476. }
  477. .b-boxs {{ Y v !
  478. margin-right: -16px;
  479. overflo/ 9 Fw6 T m ^ ] r T: hid( n A # 3 P pden;
  480. }
  481. .b-boxs .s-e Q e ~box {
  482. width: 337px;
  483. h} 2 p ] - & e *eight: auto;
  484. float: left;
  485. margin+ { O-right: 19px;
  486. margin-bottom: 36px;
  487. position: relative;
  488. overflow: hidden;
  489. box-shadow: 0 3px 9px rgba(0,0,0,.1);
  490. background: #ffffff;
  491. }
  492. .b-boxs .s-box .s-pic {
  493. wi/ C 6 6 , j : Ddth: 100%;
  494. height: 407px;
  495. }
  496. .lazy {
  497. display: block;5 ( ` g
  498. width: 15 R q W /00%;
  499. height: 100%;
  500. }
  501. @medj k F W Dia screen and (max-width: 768px){
  502. .flickity-enabled.is-dry L Y v ! 8aga | ] J F E jgable {
  503. margin-top: 0px;
  504. }
  505. }
  506. .b2-me\ 9 x /nu-4 .sub-meM { W [ 9 1 6 =nu-0 li ul a:hover {
  507. font-weight: 500;
  508. border-radius: 3px;
  509. color: #ff416c;
  510. }
  511. .b2-menu-4 .sub-menu-0 li ul a {
  512. font-M ! L i P Jsize: 16px;
  513. font-weight= A v P J l R ,: 400;
  514. color: #333333;
  515. padding: 8px 0;
  516. display: flex;
  517. align-item, Z | f 9s: center;
  518. margin-top: 0px;
  519. }
  520. .containerrr { margin: 0px auto;width:1n ] t00%; }
  521. @media screen and (max-width: 1366px) {
  522. .containerrg X b & zr {
  523. margin: 0px auto;
  524. width: 830px;
  525. }
  526. .srot-mine {
  527. width: 355px;
  528. }
  529. }
  530. .containerrr .itemss a {
  531. display: is 7 j m ` V a vnline-block;
  532. margin-right: 1U 2 p n b _6px;
  533. width: calc(100% - 16px);
  534. height: 180px;
  535. text-align: center;
  536. }
  537. .card_ZQsTb d F @ K % ~ `- {
  538. height: 192px;
  539. width: 128px;
  540. display: inline-block# 5 x = 4;
  541. vertical-align: top;
  542. cur7 B 8 b $ 2 ^sor: pointer;
  543. white-space: normal;
  544. box-shadow\ I a & 7 ~: 0 2px 5px 0 rgb(0 0 0 / 4%);
  545. backk L O ] !ground:q U : + N # R ~ #FFFFFF;
  546. overflow: hidden;
  547. position: relative;
  548. box-sizing: border-box;
  549. padding: 0px 0 16px 0;
  550. margin-right:\ a R ( M P 16px;
  551. text-decoration: none;
  552. trans_ G a , Bition: all 0.3s;
  553. }
  554. .card_ZQsT-:hover {
  555. display: inline-block;
  556. vertical-align: top;
  557. cursor: pointer;
  558. white-sJ V r P P { Lpace: normal;
  559. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
  560. background: #FFFFFF;P O 2 N $ Q ( # K
  561. overflow: hidden;
  562. positio8 O z e * H @ F gn: relative;
  563. box-sizing: border-box;
  564. padding: 0px 0 16px 0;
  565. margin-right: 16px;
  566. text-decoration: none;
  567. transform: translateY(-3pb P S hx);
  568. }
  569. .card_img{
  570. display: block;
  571. height: 180px;
  572. }
  573. .card_ZQs^ r M xT- .title_3qCGt {
  574. font-size: 14px;
  575. color: #22222~ X \ | X Y P2;
  576. height: 35px;
  577. background-color: #fff;
  578. line-height: 35px;
  579. width: 100%;
  580. posp F g f m A s Vition: absolute;
  581. display: block;
  582. margin-top: -35px;
  583. }
  584. .card_ZQsT- img{
  585. height: 180px;
  586. width: 100%;
  587. }
  588. .g h h Tcard_ZQsT- .year-tag_3Iqeg {
  589. height: 19px;
  590. min-width: 52px;
  591. width: fit-content;
  592. max-width: 1? 8 = 2 b O00%;
  593. overflow: hidden;
  594. position: absolute;
  595. top: 6px;
  596. left: 6px;
  597. text-align: center;
  598. line-height: 19px;
  599. font-size: 12px;
  600. color: #FFFFFF;
  601. box-7 Q 5 E X Z b Osizing: border-box;
  602. padding: 0 8px;
  603. bI n I Morder-radius: 10px;
  604. }
  605. .huodong{background:#0693e3}
  606. .remenr P d d ;{background:#fcb900}
  607. .jingping{background:#cf2e2e}
  608. .guanggao{backgr{ [ [ p Mound:#00d084}
  609. .tuijain{background:#ff6900}
  610. .yuliu{background:#0693e3}
  611. .on7 e % y n i 8ecad-quk-carousel .item; M k ^ss {
  612. white-space: nowrap;5 h A p 2
  613. width: 100%;
  614. display: flex;
  615. -webkit-overflow-scrolling: touch;
  616. -web5 i [ hkit-bx L V \ k Z [ ! Pox-pack: justify;
  617. -moz-box-pack: justify;
  618. justify-content: space-between;
  619. }
  620. .onecad-quk-carousel .itemss::-webkit-scrollba% # z r 6 Lr {
  621. display: none;
  622. }
  623. #OneCAD .hotUser {
  624. mE c P [ Gargin-top: 20px;
  625. }
  626. #OneCAD .hotUser .hotUser-title {
  627. position: relative;
  628. margiO r sn-bottom: 15px;
  629. width: 1180px;
  630. }
  631. #Onecad_hotuserI S 1 n * x M } i.b2-vrenzhengguanli {
  632. position: static;
  633. bottom: -4px;
  634. right: -4V U R 4 Qpx;
  635. font-weight: 400;
  636. line-height: 25px;
  637. background: #fff;
  638. borderf 8 w G O U M 8-radius: 100%;
  639. width: 25PX;
  640. height@ k N 0 2 o w / v: 25px;
  641. display: inline-block;
  642. font-size:j r = = 25px;
  643. color: #ff3a55!important;
  644. }
  645. #OneCAD .hotUser h2 {
  646. font-size: 26px;
  647. font-weight: normal;
  648. }
  649. #OneCAD .hotUser-list {
  650. display: flex;
  651. flex-wrap: wrap;
  652. margin-left: -15px;
  653. }
  654. #OneCAD .hotUser-list .itme {
  655. position: relative;
  656. widthf 3 P h - \: 25%;
  657. padding-left: 15px;
  658. margin-bottom: 15px;
  659. text-align: center;
  660. }
  661. #OneCAD .hotUser-l1 ; D * g / l Hist .itme .user-vi: y 5 y ? r op {
  662. border-radius: 3px;
  663. display: inline-block;
  664. background: linear-gQ H + U + !radient(180.03de] } | Eg, #393F68 0%, #24263C 100%);
  665. padding: 3px 6px;
  666. font-size: 11px;
  667. line-height: 15px;
  668. height, y w d v = Y -: auto;
  669. }
  670. #OneCAD .hotUser-list .itmR A S }e>div {
  671. background-color: #fff;
  672. transition: all .3s;
  673. }
  674. #OneCAD .hotUser-list .itme:nth-child(4n) {
  675. margin-right: 0;
  676. }
  677. #One* * % dCAF Y } f @D .hotUser-list .itme>div:hover {
  678. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  679. box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  680. -webkit-transform: translateY(-3px);
  681. -ms-transform:0 , { I w - * _ translateY(-3px);
  682. transform: tran# z K h # ? & MslateY(-3px);
  683. }
  684. #6 r C 9 ~ \ ~OneCAD .hotUser-list .i-banner {
  685. position:- # , E 5 } relative;
  686. height: 1I Q I20px;
  687. background: #ccc;
  688. }
  689. #OneCk o H ( x G e )AD .hotUseo c Yr-list .i-banner .i-cover| 4 m f : ^ 8 {
  690. width: 100%;
  691. heighI O r 2 Y 5t: 100%;
  692. object-fit: cover;
  693. }
  694. #OneCAD .hotUser-list .i-banner .avatar-w; M e : 6 k V J vrap {
  695. position: absolute;
  696. left: 50%;
  697. bottom: 0;
  698. margin: -42px;
  699. }
  700. #OneCAD .hotUser-list .avatar-wrap img {
  701. width: 84px;
  702. he3 ^ ( + \ 1 L Sight: 84px;
  703. border-radius: 50%;
  704. object-fit: cover;
  705. }
  706. #OneCAD .hotUser-list .itme .i-content {
  707. padding: 54px 8px 8px 8px;
  708. }
  709. #OneCAD .hotUI ^ mser-list .itme .iw , .-inline {
  710. height: 28px;
  711. line-height: 28px;
  712. white-space: nowrap;
  713. overflow: hidden;
  714. }
  715. #OneCAD\ [ W .hotUR y ] n Fser-list .itme .i-username {
  716. color: #333;
  717. font-size: 16px;
  718. font-weighq X f M 1 H It: bold;
  719. }
  720. #OneCAD .hoF u ( \ * B +tUser-list .itme .i-desc {
  721. display: inliv = ) =ne-flex;
  722. font-size: 12px;
  723. background: #f3f3f3;
  724. padding: 5px 6px;
  725. mar1 ^ } (gin: 10px 0;
  726. color: #606266;
  727. }
  728. #OneCAD .hotUser-list .itme .i-follow {
  729. font-size: 13px;
  730. margin-bottom: 10px;
  731. }
  732. #OneCAD .hotUser-list .itme .i-follow span {
  733. color: #909399;
  734. di9 . ] ~ \ t ^ 0 !splay: inline-block;
  735. position: relative;B ; C ; b r r =
  736. margin: 0 5px;
  737. }
  738. #OneCAD .hotUser-list .itmH C F Y Q @ M x |e .i-follow span b {
  739. color: #3s = `33;
  740. font-weight: bold;
  741. margin: 0 3px;
  742. }
  743. #OneCAD .post-style-5-top {
  744. margin-top: 0;
  745. }
  746. /*主页N格样式代码结束*/
温馨提示:

文章标题:【7B2主题美化】首页N格样式

文章链接:https://www.aqzyl.cn/1751.html

更新时间:2022年09月24日

本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:779451579@qq.comm我们将第一时间处理!

资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

所有资源仅限于参考和学习,版权归原作者所有,更多请阅读艾奇资源网络服务协议

本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:779451579@qq.comm我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读艾奇资源网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
B2美化WP美化

7b2主题美化-首页添加六小格

2022-9-21 0:04:05

B2美化WP美化

wordpress主题7b2主页大图搜索框美化

2022-9-24 23:10:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索