仅限于7B2主题,其他主题自行修正。
1.将下列代码放至模块自定义区域(主题设置-模块办理-自定义)
<!-- 主页N格区块html代码 开端 -->
<div id="home-row-qr - [ukuB = n ! m p :ai" class=" home_row home_row_1 module-qukuai " style="background-color:;">
<div class="wrapper">
<div c# _ ) \ q \lass="home-row-left content-area ">
<div class="soT } Srt b2-radius" style="margin-top:-100px ;">
<ul class="sort-config">
<l4 V [ } n 7i: : &>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://www.guidebook.top/images/V 8 O 1 \ J 3 Zlogo.svg" alt="" />
<a href="https://nav.guidebookH Y a \ & ( M.tx . l U e k Top" targeu C o . ; i :t="_blank"><w Z U @ a;p class="sort-config-title">数字攻略手册
<span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
</p> </a>$ j _ m;
<span clak T 9 z e Vss="sort-config-desc">高效工, y ! @ x B C j Y作学习生活手册</span>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://www.guidebook.n P 9 9 \ i ?top/images/search.svg" alt="" />
<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">搜索攻略
<span class="go" style="background-color: #5de000;">GO<j 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>
</p> </a>
<span class="sort-config-desc">聚合U K y W ; C搜索引擎</span>
</di[ O K _v></li> <li>
<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;
<img class="sort-cons & / H @ ~fig-icon" src="https://www.guidJ O w uebook.top/imj G x m |ages/danghui.svg" alt="" />
<a href="https://www.guidebook.top" target="_blank"><p class="sort-config-title">公函写作
<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>
</p&8 a ( b ; % Sgt; </a>
<span class="sortb S z-config-desc">写作素材搜集</span% R ! ! B>
</div></li> <li>
<div class="sort-config-item">
<img class="sort-config-icon" src="https://www.guidebook.top/images/news.svg"N Q 3 alt="" /&gZ d W L xt;
<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">今天资讯
<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 + >
</p> </a>
<span class="ss Z 5 7 } x ;o; l D 3 e y ert-config-desc">每日新闻速递</span>
</div></li> <li&g; 9 (t;
<div class="sort-config-item">
<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="" />
<a href="/requests" target="_blank"><p class="sort-config-title">项目库
<span class="go" style="backgrB q L Dound-color: #ff6m P ~ % 2 + H @ %000;">j - d g .;GO<i classO H h ? 7 N o 2="b2font b2-arrow-right-s-line"&g: ` \t;</i><U 4 u Y;/span>\ . : h ( u # F;
</p> <1 i 8/a>
<spanq U \ H ] k class="sort-config-desc">优秀项目列表</span>
</div></li> </ul>
<div class="sort-F n r F A ( J 3 Hblocks">
<div class="bt-body">
<div class7 i G a="containerrr">
<e ? j v C 4;div class="onecad-quk-carousel">
<\ O Q * + P 6 W (;div class="iteO E h = &mss">
<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">
<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">
</a><a class="cardz M z p ! Q l a_ZQsT- b2-radius" href="http://nav.guidebook.top" target="_blank">
<img src="https://www.guidebook.top/images/wxgzh1.png">
</ / |;/G Z X I V j w P Ba>
<a class="card_ZQsT- b2-radius" href="https://nav.guidebook.top" target="_blank">
<i] w c r ) - ( \mg src="https://www.guidebook.top/image] [ e z 7 ] os/101.jpg">
</a>
</P q [ } ) + Q g rd: + o - r Oiv&g[ ) k S K %t;
</1 , D / d ! o t odiv>
</div>
</div>
<div cE 2 U j 9lass="srot-mine b2-radius">
<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>
</dO R h p T S } I 4iv>
</div>
</div>
</div>
</div>
</div>
<J 8 k E D I b + }!-- 主页N格区块html代码 开端 -->
2.将下列代码放至WP主题额定CSS中(WP后台-外观-自定义-额定css)
/*主r n _ ; A 5 n 0页N格样式代码开端*/
/*角标CSS*/
.jiaobiao_color1{
color:#fff;
background-color:#03bbff;
}
.jiaW W y i Y =obiao_color2x ~ Z d{
color:#fff;
background-color:#ca26ff;
}
.jiaobiao_color3{
color~ 9 m Q ~ e p N:#fff;
background-color:#7bdcb5;
}
.jiaobt O F J hiao_color4{
color:#fff;
background-color:#ff2a8e;
}
.jiaobiao_color5{
color:#fff;
background-color:#ff8f21;
}
.jiaobiao_cz x 6 8 M } o a 0olor6{
color:#fff;
background-color^ E y j ! T:#10e396;
}
.tipss,.meta-post-type {
position: abs\ s ~ = . colute;
top: 0px;
rightb k & D 5 1 & x t: -64px;
z-index: 1;
width: 150px;
height: 22px;
color: #fff;
line-height: 25px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
font-size: 12px;
}
.yellow {
background-color: var(--# 0 l : mb2color);
}
.sort {
position: relative;
z-index: 3;
pad. Z C }ding:R x V % * ` 26px;
background: #fff;
/* border: 1px solid #797c80; */
/* -webkit-box-shadow: 0 40px 75px 0 rgba(57,60,67,.08)i B g 9; */
/* box-s! ] k I ` [ -hadow: 0 40px 75px 0 rgba(57,60,67,.08); */
-webkit-backdrop-filter: blur(10px+ U z y ! A);
backdrop-filter: blur(10px);
}
.sort-config {
display: -webkit/ { 5 , b *-box;
display: -ms-flek _ #xbox;
display: flex;
-webkitm P b :-box-pack: justify;
-ms-[ , $ e . l C 5flex-pack: justify;
justify-content: space-between;
}
.main {
width: 1410px;
margin: 0 auto;
padding-bottom: 40px;
}
.sort-config>li {
-webkit-box-flex: 1;
-ms-D ^ Z M % 2flex: 1;
flex: 1;
overflow: hidden;
height: 100%;
}
.ibanner-tips-float {
position: absolute;
top: -70px} & [ W;
left: 1096px;
z-index: 24;
}
.sort-config-item {
display: bl[ v I B K h ~ Aock;
height: 100%;
}
.so. 3 H } *rt-config-item img {
float: left;
width: 62px;
height: 62px;Y L ) j =
margin-right: 12px;
}
.sort-config-ti^ ] % 0 H l } A 1tle {
line-S M _ r s + _ :hN M r i C u { 4eight: 34px;
font-size: 18px;
font-weigh+ q + % 8 | * + !t: 600;
color: #2d2d2d;
-6 , iwebkit-transition: .3s;
transition: .3s;
}
.sort-config-desc {
float: left;
line-a | e 9 T o s h hheight: 22px;
font-size: 14px;
color: #8e8e8e;
}
.sort-blocks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
margin-top: 35px;
}
.sortA % Y E # g m-blocks-item {
position: relative;
overflow: hidden;
width: 214px;
height: 100%;
background: #f7f9fa;
border-radius: 14px;
}
.sort-bl2 q c y 9ocksN S \ 2 J d b N w-item .blocks-item-wrap {
-webkit-transition: .3s;
transition: .3s;
-webkit-filt\ @ H _ o i 9 Ger: none;
filter: none;
}
.so0 ` 4 a ~ P \rt-blocks-icon {
display: block;
width: 60px;O j H 6 M I [ &
height: 47px;
margi` ; ~ ] _ dn: 18px auto 15px;
backgro( i 2 4 j ) X lund-repeatS ~ Y C A a D: nox h $ 8 0 Z x . I-repeat;
b| F 5 G \ wackground-size: cover;
}
.sort-blocks-title {f 3 t ! H x J k
line-height: 22pn R / [ E z ]x;
fonA r U F _t-size: 22px;
font-weight: 600;
color: #2d2d2d;
letter-spacing: 1H Z C _ R , Zpx;
text-a^ ? ! N $lign: center;
}
.* $ g C - ) 6 Rsort-mine-wrap img {l + p ( B F [ c
display: flex;
width: auto;
}
.sort-config-title .go2 K = r {
borf z e }der-radius: 4px;
color: #ffffff;
font-size: 13pE p : \ 3 X p M [x;
-webkit-transform: scale(.9);
-ms-trE d } Tansform: scale(.9);
transform: scale(.9);
font-weight: normal;
padding: 2px 5px;
position: absolute;
line-height:c m a V ) 15D _ s Ipx;
margin-left: 5px;
cursor: pointer;
text-tranV V J gsfor5 m w 1 W 4m: uppercase;
vertical-align: middle;
margin-top: 7px;
}
.s- t 9 * _ ( y aort-blocks-item .blocks-hover, .sort-blocks-item .blocks-hover-title {
position: abs% f \ kolute;
top: 0;
width: 100%;
color: #fff;
text-align: center;
line-height: 22px;
}
.sort-block. e , $s-item .blocks-hover {
left: 0;
height: 100%;
padding-top: 22px;
font-size: 14px;
background: rgba(0,0,0,.4);
-webkit-transition: .3s;
traO C Q mnsition: .3s;
opacity: 0;
}
.sort-blocks-item .blocks-hover-tit {
line-height: 18px;
fo[ \ d E U 7 m o wnt-size: 18px;W j \ g 8 c 1 Z
}
.sort-blocks-item .blocks-hover-line {
width: 158px;
height: 1px;
margin: 12px auto 8px;
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)));
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));
}
.srot-mine {
position: r9 S @ 2 z xelative;
width: 376px;
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));
background: linear-gradient(90deg,#fdf8eb. c & 0 F . S,#feeec3);
height: 180px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
}
.srot-mine-bg {
position: absolute;
top: 13px;
right: -13px;
width: 118px;
height: 78px;
background: url(./Center/Assets/images/sort_zuanshi.png) no-repeat;
background-size: cover;
}
.sort-m( t ) ] % Kine-wrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 12px 16px 15px;
}
.srot-mine-titd f F I % e {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-hei% q j k sght: 25px;
}
.srot-mine-ava {
width: 20px;
height: 20px;
border-radius: 50%w d r e p;
}
.srot-mine-tit>span {
margin-left: 9px;
font-size: 15px;
font-we| { g H J m t j Fight: 600;
color: #613c14;
}
.srot-mine-vips {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
width: 337px;
margin: 15px 0px 5px;
}
.sort-vips-item {
d! t d ` X t 9 Gisplay: block;
-webkit-box-flex: 1;
-ms-fl^ ) N @ x zex: 1;
flex: 1;
text-align: center;
}
.d s , vsort-vips-icon {
display: block;~ + f n ) 6 p j
width: 32px;
height: 3p - u + K F6px;
margin: 0 auto;
-webkit-transition: .3s;
transitioO k E . o R U 4 nn: .3s;
margin-left: 30px;
}
.sort-vips-tit {
margin: 15px 0px;
line-heigd P q e % o I u 2ht: 12px;
font-size: 13px;
con i . vlor: #t ` f )613c14;
margin-left: 10px;
}
.sd Y d Vort-vips-tit2-kt {
margin-top: 10px;g } y V T =
lineL K * _ V T (-height: 12px;
did z Q . Asplay: flex;
justify-content: cent; ] 2 _er;
align-it; 2 D h U & P kems: center;M \ 7 p V
height: 25{ @ W 4 upx;
color: #ffffff;
border-radius: 33p5 u R g a G 5 S Ix;
margin-right: 10px;
font-size: 14px;
background-image: linear-gradient(90deg,#ffc046,#ff7d04);
margin: 10px 0px 0px 9px;
}
.s9 p o 0 ^ort-vips-tit2-wk {
margin-top: 10px;
line-height: 12px;
display: fleK L l 9 B 1 E +x;
justify-content: center;
alig% x y : ( * ]n-items: center;
height: 25px;
color: #ffffff;
bordy n K ^ ( \ ferD n i b 9 M Y %-radius: 33px;
margi? n I T x s L Dn-right: 10px;
font-size: 14px;
opacity: 0.5;
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;
margin: 13 * g l : b a0px 0px 0px 9px;
}
.bt-body {m o p ^ c X b 0
padding-bottom: 0px;
background: transparent;
width: calc(100% - 376px);
}
.b-boxs .video .s-pic{height: 189px;}
.b-boxs .video .video-view {height: 186px;width: 337px; overflow: ha Q ( & b |id1 g { yden; cursor: pointer;display: block;}
.b-boxs .video:hover .J . 3 e R & ^ =video-view .img-none{displJ p O } Z +ay: none;}
.b-boxs .video .video-view video{width: 337px;}
.b-boxs .video:hover .video-view video{display: block;}
.b-boxs .video .mark{height: 189px; display:o u m / H 5 none;}
.b-boxs .video:hover .mark{display: none;}
.b-boxs .video .v-down{
poI E F $ s ?sition: absolute;
top: 12px;
left: 57%;
z-index: 2;
marg2 b H ) ` :in-left: 65px;
p| S i / .adding-left: 21px;
width: 45px;
height: 31px;
border-W w ( % fradius: 2px;
background: url(./Center/Assets/images/vid- / Feo.png) -8px -77px no-repeat #007aff;
color: #fff;
font-size: 20px;
font-size: 14px;
line-height: 31px;
opacity: 0;
cursor: pointer;
-moz-opacity: 0;
-khtml-opaciti w = M d R ~y: 0;
}
.b-boxs .video .v-down:hover {
background: url() -5px -77px no-repeat #6e91e6;
}
.b-boxs .Y 5 } /vide} a t A ; [ ! j Zo .v-collect{
widO 2 Lth: 31px;
height: 31px;
line-height: 31px;
position: absolute;
left: 58%;
top: 12px;
margin-left: 23px;
color: #333;
font-size: 20px;
border-radius: 2px;
z-index: 2;B R 6 4 ^ ~ s
background: url(./Center/Assety D C ; ~ L 0s/images/viC q B m xdeo.png7 m .) -11px 5px no-repeat #fff;
padding-left: 0px;d a r
cu\ / ( \ -rsor: pointer;
filter: alpha(opacityL K a=0);
ilterd _ r x: alphaP [ Q !(opacity=0);
-moz-opacity: 0;
-kk 2 ; . + j } _html-opaciF L j Ety: 0;
opacity: 0;
font-size: 17px;
letter-spacing: 7px;
}
.b-boxs .video2 } + L W = f:hover .v-collect,.b-boxs .video:hover .v-down{
filter: alpha(opacity=1);
ilter: alpha(opacity=1);
-) = Y #moz-opacT P ] V r Tity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.b-boxs .video .4 d v P , Y F /chosed{
background: u. \ f C grl(./Center/Assets/images/video.png) -11px -36px no-repeat #fff;
}
.b-boxs .video .titN t c : T Mle {
position: absolute;
bottom: 0px;
left: 0px;
widt, 1 ; M 9 3 )h:? ) - V & Y P | 318 x w6px;
heigh4 V ht: 30px;
line-height:, i U E Z + % m 30pxq j N r Y;
color: #ffffff;
text-align: left;
z-index: 1;
overflow: hidden;
white-space: not R w + 8 ? 9 8wrap;
-o-text-overflow: ellipsis;
tex6 V p s 3 _ m \ Pt-ove& : - D /rflow: ellipsis;
font-size: 12px;
background: #00000075;
background-color: #1677ff00;
background-image: lio ; k ; _near-grS { D u 9 q p F tadient(-90deg, #00000000, #000000);
}
.b-box .audio-box {
width: 340px;
height: 160px;
float: left;
margin-right: 16px;
margin-bottom: 16px;
margin-top: 0px;
posite L :ion: relative;6 } 8 9 ;
overf: j H 0 2low: hidden;
box-shadow: 0 0px 9pxb \ I rgba(0,0,0,.1);
background: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-radius: 10px;
}
.b-boxs .video:hover .video-b| ^ N i _ Z \ O Gq,.b-boxl J e M \ ? es .video:hover .title{
display: none;
}
.b-boxs .video:hover .mc-bottom{
display:none;
}
.b-boxs .video .mc-bottom{Q r m j ~ g
display: inline-block;
positiop / 9 u fn: absolute;
width: 100%;
height: 32%;
left: 0;
bott} . X t P o [ rom: 0;
background: #000;
opacity: .4 \9 \0;
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .p E _ = l ^ `4) 0, tr, z ranI & % ` Y L Tsparent 100%);
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));
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%);
background: -o-linear-gradien0 ~ : 4 I z It(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
background: -ms] ^ H 6 7 o-linear-gradient(bottom, rgba(0, 0,@ X C M / L 0, .4) 0, transparent 100%);
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .4)), to(transparent));
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
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));
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));
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));
background: linear-gradient(to toW b (p, rg^ f wba(0, 0, 0, .4) 0,1 w f ` transparent 100%)k ( u;
filter: progid:DXImageTransform.Microsofti d 5 ; \ V.gradC 9 ] y l 0 ! rient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstB G v _ Jr=#000000,G R A B ) ) 4 l # endColorstr=#ffffff)";
}
.good-ppt {
width: 100%X r = k E T W;
}
.topic-titl; 5 T \ A Z +e {
height: 41px;
color: #484747;
text-align: left;
}
.wlimits {
margin-rig\ - , W / 2 }ht: -59px;
}
.topic-} C ] G : /title .jptitle {
display: inline-block;
width: 280px;
color: #000;
letA [ J / { ` ~ }ter-spacing: 22 m \ ` i & u -px;
font-size: 24px;
}
.topic-title .jptit: ; G { U ~ /le .shiping {
display: inline-block;
width: 87px;
height: 63px;
background: url(../image/tb.png) 0px -345px no-re2 E T p m + u ppeat;
vertical-align: -23px;
}
.C l /topic-title ul {
display: inline-block;
floP o o A P 1at: right;
}
.topic-title ul li {
display: inline-block;
}
.topic-title ul li a {
display: inline-block;
margin-right: 6px;
padding: 0 10px;
height: 35px;
/* border: 1px solid #e5e5e5; */
/* backgror } [ p C y - iund: #fff; */
color: #606060;
fontY 7 $ p J | 7 C-size: 14px;
line-height: 35px;
}
.\ P 5 $topic-title uO 1 $ \ o ] ` Hl lG A % * e * ^ Y }i em {
display: inline-block;
height: 14px;
width: 1px;
background: #b7b7b7;, i e ] O t [ E b
vertical-align: -2px;
}
.b-boxs {{ Y v !
margin-right: -16px;
overflo/ 9 Fw6 T m ^ ] r T: hid( n A # 3 P pden;
}
.b-boxs .s-e Q e ~box {
width: 337px;
h} 2 p ] - & e *eight: auto;
float: left;
margin+ { O-right: 19px;
margin-bottom: 36px;
position: relative;
overflow: hidden;
box-shadow: 0 3px 9px rgba(0,0,0,.1);
background: #ffffff;
}
.b-boxs .s-box .s-pic {
wi/ C 6 6 , j : Ddth: 100%;
height: 407px;
}
.lazy {
display: block;5 ( ` g
width: 15 R q W /00%;
height: 100%;
}
@medj k F W Dia screen and (max-width: 768px){
.flickity-enabled.is-dry L Y v ! 8aga | ] J F E jgable {
margin-top: 0px;
}
}
.b2-me\ 9 x /nu-4 .sub-meM { W [ 9 1 6 =nu-0 li ul a:hover {
font-weight: 500;
border-radius: 3px;
color: #ff416c;
}
.b2-menu-4 .sub-menu-0 li ul a {
font-M ! L i P Jsize: 16px;
font-weight= A v P J l R ,: 400;
color: #333333;
padding: 8px 0;
display: flex;
align-item, Z | f 9s: center;
margin-top: 0px;
}
.containerrr { margin: 0px auto;width:1n ] t00%; }
@media screen and (max-width: 1366px) {
.containerrg X b & zr {
margin: 0px auto;
width: 830px;
}
.srot-mine {
width: 355px;
}
}
.containerrr .itemss a {
display: is 7 j m ` V a vnline-block;
margin-right: 1U 2 p n b _6px;
width: calc(100% - 16px);
height: 180px;
text-align: center;
}
.card_ZQsTb d F @ K % ~ `- {
height: 192px;
width: 128px;
display: inline-block# 5 x = 4;
vertical-align: top;
cur7 B 8 b $ 2 ^sor: pointer;
white-space: normal;
box-shadow\ I a & 7 ~: 0 2px 5px 0 rgb(0 0 0 / 4%);
backk L O ] !ground:q U : + N # R ~ #FFFFFF;
overflow: hidden;
position: relative;
box-sizing: border-box;
padding: 0px 0 16px 0;
margin-right:\ a R ( M P 16px;
text-decoration: none;
trans_ G a , Bition: all 0.3s;
}
.card_ZQsT-:hover {
display: inline-block;
vertical-align: top;
cursor: pointer;
white-sJ V r P P { Lpace: normal;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
background: #FFFFFF;P O 2 N $ Q ( # K
overflow: hidden;
positio8 O z e * H @ F gn: relative;
box-sizing: border-box;
padding: 0px 0 16px 0;
margin-right: 16px;
text-decoration: none;
transform: translateY(-3pb P S hx);
}
.card_img{
display: block;
height: 180px;
}
.card_ZQs^ r M xT- .title_3qCGt {
font-size: 14px;
color: #22222~ X \ | X Y P2;
height: 35px;
background-color: #fff;
line-height: 35px;
width: 100%;
posp F g f m A s Vition: absolute;
display: block;
margin-top: -35px;
}
.card_ZQsT- img{
height: 180px;
width: 100%;
}
.g h h Tcard_ZQsT- .year-tag_3Iqeg {
height: 19px;
min-width: 52px;
width: fit-content;
max-width: 1? 8 = 2 b O00%;
overflow: hidden;
position: absolute;
top: 6px;
left: 6px;
text-align: center;
line-height: 19px;
font-size: 12px;
color: #FFFFFF;
box-7 Q 5 E X Z b Osizing: border-box;
padding: 0 8px;
bI n I Morder-radius: 10px;
}
.huodong{background:#0693e3}
.remenr P d d ;{background:#fcb900}
.jingping{background:#cf2e2e}
.guanggao{backgr{ [ [ p Mound:#00d084}
.tuijain{background:#ff6900}
.yuliu{background:#0693e3}
.on7 e % y n i 8ecad-quk-carousel .item; M k ^ss {
white-space: nowrap;5 h A p 2
width: 100%;
display: flex;
-webkit-overflow-scrolling: touch;
-web5 i [ hkit-bx L V \ k Z [ ! Pox-pack: justify;
-moz-box-pack: justify;
justify-content: space-between;
}
.onecad-quk-carousel .itemss::-webkit-scrollba% # z r 6 Lr {
display: none;
}
#OneCAD .hotUser {
mE c P [ Gargin-top: 20px;
}
#OneCAD .hotUser .hotUser-title {
position: relative;
margiO r sn-bottom: 15px;
width: 1180px;
}
#Onecad_hotuserI S 1 n * x M } i.b2-vrenzhengguanli {
position: static;
bottom: -4px;
right: -4V U R 4 Qpx;
font-weight: 400;
line-height: 25px;
background: #fff;
borderf 8 w G O U M 8-radius: 100%;
width: 25PX;
height@ k N 0 2 o w / v: 25px;
display: inline-block;
font-size:j r = = 25px;
color: #ff3a55!important;
}
#OneCAD .hotUser h2 {
font-size: 26px;
font-weight: normal;
}
#OneCAD .hotUser-list {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
}
#OneCAD .hotUser-list .itme {
position: relative;
widthf 3 P h - \: 25%;
padding-left: 15px;
margin-bottom: 15px;
text-align: center;
}
#OneCAD .hotUser-l1 ; D * g / l Hist .itme .user-vi: y 5 y ? r op {
border-radius: 3px;
display: inline-block;
background: linear-gQ H + U + !radient(180.03de] } | Eg, #393F68 0%, #24263C 100%);
padding: 3px 6px;
font-size: 11px;
line-height: 15px;
height, y w d v = Y -: auto;
}
#OneCAD .hotUser-list .itmR A S }e>div {
background-color: #fff;
transition: all .3s;
}
#OneCAD .hotUser-list .itme:nth-child(4n) {
margin-right: 0;
}
#One* * % dCAF Y } f @D .hotUser-list .itme>div:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-webkit-transform: translateY(-3px);
-ms-transform:0 , { I w - * _ translateY(-3px);
transform: tran# z K h # ? & MslateY(-3px);
}
#6 r C 9 ~ \ ~OneCAD .hotUser-list .i-banner {
position:- # , E 5 } relative;
height: 1I Q I20px;
background: #ccc;
}
#OneCk o H ( x G e )AD .hotUseo c Yr-list .i-banner .i-cover| 4 m f : ^ 8 {
width: 100%;
heighI O r 2 Y 5t: 100%;
object-fit: cover;
}
#OneCAD .hotUser-list .i-banner .avatar-w; M e : 6 k V J vrap {
position: absolute;
left: 50%;
bottom: 0;
margin: -42px;
}
#OneCAD .hotUser-list .avatar-wrap img {
width: 84px;
he3 ^ ( + \ 1 L Sight: 84px;
border-radius: 50%;
object-fit: cover;
}
#OneCAD .hotUser-list .itme .i-content {
padding: 54px 8px 8px 8px;
}
#OneCAD .hotUI ^ mser-list .itme .iw , .-inline {
height: 28px;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
}
#OneCAD\ [ W .hotUR y ] n Fser-list .itme .i-username {
color: #333;
font-size: 16px;
font-weighq X f M 1 H It: bold;
}
#OneCAD .hoF u ( \ * B +tUser-list .itme .i-desc {
display: inliv = ) =ne-flex;
font-size: 12px;
background: #f3f3f3;
padding: 5px 6px;
mar1 ^ } (gin: 10px 0;
color: #606266;
}
#OneCAD .hotUser-list .itme .i-follow {
font-size: 13px;
margin-bottom: 10px;
}
#OneCAD .hotUser-list .itme .i-follow span {
color: #909399;
di9 . ] ~ \ t ^ 0 !splay: inline-block;
position: relative;B ; C ; b r r =
margin: 0 5px;
}
#OneCAD .hotUser-list .itmH C F Y Q @ M x |e .i-follow span b {
color: #3s = `33;
font-weight: bold;
margin: 0 3px;
}
#OneCAD .post-style-5-top {
margin-top: 0;
}
/*主页N格样式代码结束*/
文章标题:【7B2主题美化】首页N格样式
文章链接:https://www.aqzyl.cn/1751.html
更新时间:2022年09月24日
本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:779451579@qq.comm我们将第一时间处理!
资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
所有资源仅限于参考和学习,版权归原作者所有,更多请阅读艾奇资源网络服务协议。