仅限于7B2主题,其他主题自行修改。
1.将下列代码放至模块自定义区域(主题设置-模块管理-自定义)
<!-- 首页N格区块html代码 开始 --> <div id="home-row-qukuai" class=" home_row home_row_1 module-qukuai " style="background-color:;"> <div class="wrapper"> <div class="home-row-left content-area "> <div class="sort b2-radius" style="margin-top:-100px ;"> <ul class="sort-config"> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/logo.svg" alt="" /> <a href="https://nav.guidebook.top" target="_blank"><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> <span class="sort-config-desc">高效工作学习生活手册</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/search.svg" alt="" /> <a href="https://search.guidebook.top" target="_blank"><p class="sort-config-title">搜索指南 <span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">聚合搜索引擎</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/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 class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">写作素材收集</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/news.svg" alt="" /> <a href="https://nav.guidebook.top/hotnews/" target="_blank"><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> <span class="sort-config-desc">每日新闻速递</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/hezuoanli.svg" alt="" /> <a href="/requests" target="_blank"><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> <span class="sort-config-desc">优秀项目列表</span> </div></li> </ul> <div class="sort-blocks"> <div class="bt-body"> <div class="containerrr"> <div class="onecad-quk-carousel"> <div class="itemss"> <a class="card_ZQsT- b2-radius" href="https://www.guidebook.top/337/" target="_blank"> <img src="https://www.guidebook.top/images/shetuwang.png"> </a><a class="card_ZQsT- b2-radius" href="http://nav.guidebook.top" target="_blank"> <img src="https://www.guidebook.top/images/wxgzh1.png"> </a> <a class="card_ZQsT- b2-radius" href="https://nav.guidebook.top" target="_blank"> <img src="https://www.guidebook.top/images/101.jpg"> </a> </div> </div> </div> </div> <div class="srot-mine b2-radius"> <div class="wwads-cn wwads-horizontal" data-id="147" style="width:376px; height:180px;flex-wrap:nowrap;margin-top:0px;background-color:azure;padding:0px;"></div> </div> </div> </div> </div> </div> </div> <!-- 首页N格区块html代码 结束 -->
2.将下列代码放至WP主题额外CSS中(WP后台-外观-自定义-额外css)
/*首页N格样式代码开始*//*角标CSS*/.jiaobiao_color1{ color:#fff; background-color:#03bbff; } .jiaobiao_color2{ color:#fff; background-color:#ca26ff; } .jiaobiao_color3{ color:#fff; background-color:#7bdcb5; } .jiaobiao_color4{ color:#fff; background-color:#ff2a8e; } .jiaobiao_color5{ color:#fff; background-color:#ff8f21; } .jiaobiao_color6{ color:#fff; background-color:#10e396; } .tipss,.meta-post-type { position: absolute; top: 0px; right: -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(--b2color); } .sort { position: relative; z-index: 3; padding: 26px; background: #fff; /* border: 1px solid #797c80; */ /* -webkit-box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */ /* box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sort-config { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main { width: 1410px; margin: 0 auto; padding-bottom: 40px; } .sort-config>li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; height: 100%; } .ibanner-tips-float { position: absolute; top: -70px; left: 1096px; z-index: 24; } .sort-config-item { display: block; height: 100%; } .sort-config-item img { float: left; width: 62px; height: 62px; margin-right: 12px; } .sort-config-title { line-height: 34px; font-size: 18px; font-weight: 600; color: #2d2d2d; -webkit-transition: .3s; transition: .3s; } .sort-config-desc { float: left; line-height: 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; } .sort-blocks-item { position: relative; overflow: hidden; width: 214px; height: 100%; background: #f7f9fa; border-radius: 14px; } .sort-blocks-item .blocks-item-wrap { -webkit-transition: .3s; transition: .3s; -webkit-filter: none; filter: none; } .sort-blocks-icon { display: block; width: 60px; height: 47px; margin: 18px auto 15px; background-repeat: no-repeat; background-size: cover; } .sort-blocks-title { line-height: 22px; font-size: 22px; font-weight: 600; color: #2d2d2d; letter-spacing: 1px; text-align: center; } .sort-mine-wrap img { display: flex; width: auto; } .sort-config-title .go { border-radius: 4px; color: #ffffff; font-size: 13px; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); font-weight: normal; padding: 2px 5px; position: absolute; line-height: 15px; margin-left: 5px; cursor: pointer; text-transform: uppercase; vertical-align: middle; margin-top: 7px; } .sort-blocks-item .blocks-hover, .sort-blocks-item .blocks-hover-title { position: absolute; top: 0; width: 100%; color: #fff; text-align: center; line-height: 22px; } .sort-blocks-item .blocks-hover { left: 0; height: 100%; padding-top: 22px; font-size: 14px; background: rgba(0,0,0,.4); -webkit-transition: .3s; transition: .3s; opacity: 0; } .sort-blocks-item .blocks-hover-tit { line-height: 18px; font-size: 18px; } .sort-blocks-item .blocks-hover-line { width: 158px; height: 1px; margin: 12px auto 8px; background: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(30%,hsla(0,0%,100%,.7)),color-stop(70%,hsla(0,0%,100%,.7)),to(hsla(0,0%,100%,.1))); background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7) 30%,hsla(0,0%,100%,.7) 70%,hsla(0,0%,100%,.1)); } .srot-mine { position: relative; width: 376px; background: -webkit-gradient(linear,left top,right top,from(#fdf8eb),to(#feeec3)); background: linear-gradient(90deg,#fdf8eb,#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-mine-wrap { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; padding: 12px 16px 15px; } .srot-mine-tit { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 25px; } .srot-mine-ava { width: 20px; height: 20px; border-radius: 50%; } .srot-mine-tit>span { margin-left: 9px; font-size: 15px; font-weight: 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 { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .sort-vips-icon { display: block; width: 32px; height: 36px; margin: 0 auto; -webkit-transition: .3s; transition: .3s; margin-left: 30px; } .sort-vips-tit { margin: 15px 0px; line-height: 12px; font-size: 13px; color: #613c14; margin-left: 10px; } .sort-vips-tit2-kt { margin-top: 10px; line-height: 12px; display: flex; justify-content: center; align-items: center; height: 25px; color: #ffffff; border-radius: 33px; margin-right: 10px; font-size: 14px; background-image: linear-gradient(90deg,#ffc046,#ff7d04); margin: 10px 0px 0px 9px; } .sort-vips-tit2-wk { margin-top: 10px; line-height: 12px; display: flex; justify-content: center; align-items: center; height: 25px; color: #ffffff; border-radius: 33px; margin-right: 10px; font-size: 14px; opacity: 0.5; background: 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: 10px 0px 0px 9px; } .bt-body { 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: hidden; cursor: pointer;display: block;} .b-boxs .video:hover .video-view .img-none{display: 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: none;} .b-boxs .video:hover .mark{display: none;} .b-boxs .video .v-down{ position: absolute; top: 12px; left: 57%; z-index: 2; margin-left: 65px; padding-left: 21px; width: 45px; height: 31px; border-radius: 2px; background: url(./Center/Assets/images/video.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-opacity: 0; } .b-boxs .video .v-down:hover { background: url() -5px -77px no-repeat #6e91e6; } .b-boxs .video .v-collect{ width: 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; background: url(./Center/Assets/images/video.png) -11px 5px no-repeat #fff; padding-left: 0px; cursor: pointer; filter: alpha(opacity=0); ilter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; font-size: 17px; letter-spacing: 7px; } .b-boxs .video:hover .v-collect,.b-boxs .video:hover .v-down{ filter: alpha(opacity=1); ilter: alpha(opacity=1); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .b-boxs .video .chosed{ background: url(./Center/Assets/images/video.png) -11px -36px no-repeat #fff; } .b-boxs .video .title { position: absolute; bottom: 0px; left: 0px; width: 316px; height: 30px; line-height: 30px; color: #ffffff; text-align: left; z-index: 1; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 12px; background: #00000075; background-color: #1677ff00; background-image: linear-gradient(-90deg, #00000000, #000000); } .b-box .audio-box { width: 340px; height: 160px; float: left; margin-right: 16px; margin-bottom: 16px; margin-top: 0px; position: relative; overflow: hidden; box-shadow: 0 0px 9px 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-bq,.b-boxs .video:hover .title{ display: none; } .b-boxs .video:hover .mc-bottom{ display:none; } .b-boxs .video .mc-bottom{ display: inline-block; position: absolute; width: 100%; height: 32%; left: 0; bottom: 0; background: #000; opacity: .4 \9 \0; background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%); background: -webkit-gradient(linear, bottom, top, color-stop(0, rgba(0, 0, 0, .4)), color-stop(100%, transparent)); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%); background: -ms-linear-gradient(bottom, rgba(0, 0, 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: -webkit-gradient(linear, left bottom, left top, color-stop(0, 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: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent)); background: linear-gradient(to top, rgba(0, 0, 0, .4) 0, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#ffffff)"; } .good-ppt { width: 100%; } .topic-title { height: 41px; color: #484747; text-align: left; } .wlimits { margin-right: -59px; } .topic-title .jptitle { display: inline-block; width: 280px; color: #000; letter-spacing: 2px; font-size: 24px; } .topic-title .jptitle .shiping { display: inline-block; width: 87px; height: 63px; background: url(../image/tb.png) 0px -345px no-repeat; vertical-align: -23px; } .topic-title ul { display: inline-block; float: 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; */ /* background: #fff; */ color: #606060; font-size: 14px; line-height: 35px; } .topic-title ul li em { display: inline-block; height: 14px; width: 1px; background: #b7b7b7; vertical-align: -2px; } .b-boxs { margin-right: -16px; overflow: hidden; } .b-boxs .s-box { width: 337px; height: auto; float: left; margin-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 { width: 100%; height: 407px; } .lazy { display: block; width: 100%; height: 100%; } @media screen and (max-width: 768px){ .flickity-enabled.is-draggable { margin-top: 0px; } } .b2-menu-4 .sub-menu-0 li ul a:hover { font-weight: 500; border-radius: 3px; color: #ff416c; } .b2-menu-4 .sub-menu-0 li ul a { font-size: 16px; font-weight: 400; color: #333333; padding: 8px 0; display: flex; align-items: center; margin-top: 0px; } .containerrr { margin: 0px auto;width:100%; } @media screen and (max-width: 1366px) { .containerrr { margin: 0px auto; width: 830px; } .srot-mine { width: 355px; } } .containerrr .itemss a { display: inline-block; margin-right: 16px; width: calc(100% - 16px); height: 180px; text-align: center; } .card_ZQsT- { height: 192px; width: 128px; display: inline-block; vertical-align: top; cursor: pointer; white-space: normal; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%); background: #FFFFFF; overflow: hidden; position: relative; box-sizing: border-box; padding: 0px 0 16px 0; margin-right: 16px; text-decoration: none; transition: all 0.3s; } .card_ZQsT-:hover { display: inline-block; vertical-align: top; cursor: pointer; white-space: normal; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%); background: #FFFFFF; overflow: hidden; position: relative; box-sizing: border-box; padding: 0px 0 16px 0; margin-right: 16px; text-decoration: none; transform: translateY(-3px); } .card_img{ display: block; height: 180px; } .card_ZQsT- .title_3qCGt { font-size: 14px; color: #222222; height: 35px; background-color: #fff; line-height: 35px; width: 100%; position: absolute; display: block; margin-top: -35px; } .card_ZQsT- img{ height: 180px; width: 100%; } .card_ZQsT- .year-tag_3Iqeg { height: 19px; min-width: 52px; width: fit-content; max-width: 100%; overflow: hidden; position: absolute; top: 6px; left: 6px; text-align: center; line-height: 19px; font-size: 12px; color: #FFFFFF; box-sizing: border-box; padding: 0 8px; border-radius: 10px; } .huodong{background:#0693e3} .remen{background:#fcb900} .jingping{background:#cf2e2e} .guanggao{background:#00d084} .tuijain{background:#ff6900} .yuliu{background:#0693e3} .onecad-quk-carousel .itemss { white-space: nowrap; width: 100%; display: flex; -webkit-overflow-scrolling: touch; -webkit-box-pack: justify; -moz-box-pack: justify; justify-content: space-between; } .onecad-quk-carousel .itemss::-webkit-scrollbar { display: none; } #OneCAD .hotUser { margin-top: 20px; } #OneCAD .hotUser .hotUser-title { position: relative; margin-bottom: 15px; width: 1180px; } #Onecad_hotuser i.b2-vrenzhengguanli { position: static; bottom: -4px; right: -4px; font-weight: 400; line-height: 25px; background: #fff; border-radius: 100%; width: 25PX; height: 25px; display: inline-block; font-size: 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; width: 25%; padding-left: 15px; margin-bottom: 15px; text-align: center; } #OneCAD .hotUser-list .itme .user-vip { border-radius: 3px; display: inline-block; background: linear-gradient(180.03deg, #393F68 0%, #24263C 100%); padding: 3px 6px; font-size: 11px; line-height: 15px; height: auto; } #OneCAD .hotUser-list .itme>div { background-color: #fff; transition: all .3s; } #OneCAD .hotUser-list .itme:nth-child(4n) { margin-right: 0; } #OneCAD .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: translateY(-3px); transform: translateY(-3px); } #OneCAD .hotUser-list .i-banner { position: relative; height: 120px; background: #ccc; } #OneCAD .hotUser-list .i-banner .i-cover { width: 100%; height: 100%; object-fit: cover; } #OneCAD .hotUser-list .i-banner .avatar-wrap { position: absolute; left: 50%; bottom: 0; margin: -42px; } #OneCAD .hotUser-list .avatar-wrap img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; } #OneCAD .hotUser-list .itme .i-content { padding: 54px 8px 8px 8px; } #OneCAD .hotUser-list .itme .i-inline { height: 28px; line-height: 28px; white-space: nowrap; overflow: hidden; } #OneCAD .hotUser-list .itme .i-username { color: #333; font-size: 16px; font-weight: bold; } #OneCAD .hotUser-list .itme .i-desc { display: inline-flex; font-size: 12px; background: #f3f3f3; padding: 5px 6px; margin: 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; display: inline-block; position: relative; margin: 0 5px; } #OneCAD .hotUser-list .itme .i-follow span b { color: #333; font-weight: bold; margin: 0 3px; } #OneCAD .post-style-5-top { margin-top: 0; } /*首页N格样式代码结束*/