PS；
平时子主题没重大改版情况下，日常区块调用将更新在这篇文章。
以 为方便老哥根据自己按需自由DIY进行调用
B2区块使用方法;
使用方法 – 使用以下代码替换原来VIP页面代码即可
<?php
/**
* vip页面-大咖潮制作
*/
get_header();
?>
<style>
/*新会员页面开始*/
.icon2 {
width: 4em; height: 4em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.banner-container {
height: 300px;
width: 100%;
background-image: url(https://tk.sdklib.com/2022/01/09/d8132b5966ca4.png);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-top: -10px;
padding-top: 110px;
}
.vip-item .txt_tag {
overflow: hidden;
top: 0;
left: 0;
font-size: 16px;
width: 105px;
height: 105px;
float: right
}
.vip-item {
padding: 0
}
.vip-list-in {
padding: 20px!important
}
.vip-item .txt_tag span {
z-index: 2;
color: #fff;
display: block;
text-align: center;
background: #fd4c57;
position: relative;
left: -25px;
top: 25px;
width: 180px;
height: 30px;
line-height: 30px;
overflow: hidden;
transform: rotate(44deg)
}
.vip-list .vip-item:nth-child(1) #zx {
display: none
}
.vip-list .vip-item:nth-child(2) #zx {
display: none
}
.vip-list .vip-item:nth-child(3) #zx {
display: none
}
.vip-list .vip-item:nth-child(4) #zx {
display: none
}
.vip-list .vip-item:nth-child(1) .txt_tag span {
background: #ff9800
}
.vip-list .vip-item:nth-child(2) .txt_tag span {
background: #ff9800
}
.vip-list .vip-item:nth-child(3) .txt_tag span {
background: #ff9800
}
.vip-list .vip-item:nth-child(4) .txt_tag span {
background: #ff9800
}
.warr{
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
.banner-container h2 {
font-size: 50px;
font-weight: 700;
color: #fff;
letter-spacing: 4.69px;
text-align: center;
line-height: 60px;
text-shadow: 0 8px 16px rgb(28 31 33 / 30%);
margin-bottom: 30px;
}
.banner-container .desc {
display: inline-block;
font-size: 19px;
color: #fff;
text-align: center;
line-height: 24px;
}
.vip-current {
font-size: 16px;
border:none;
}
.content-area.vip-page {
width: 1200px;
max-width: 100%;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
.vip-list {
display: flex;
flex-flow: wrap;
justify-content: center;
}
.vip-item {
width: 500px;
height: 250px;
margin-top: 40px;
margin-bottom: 40px;
box-sizing: border-box;
text-align: center;
position: relative;
border-radius: 16px;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.vip-list-in {
text-align: left!important;
padding: 0;
}
.vip-list-in .tequan-type-head {
position: absolute;
left: 125px;
top: 40px;
height: 60px;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.vip-list-in h2 {
font-size: 22px;
}
.tequan-type-head p {
font-size: 16px;
color: white;
padding-left: 3px;
}
.tequan-type-head span {
font-size: 14px;
color: white;
opacity: .8;
line-height: 28px;
padding-left: 3px;
}
.vip-list-in .type2 {
display: flex;
align-items: center;
justify-content: space-between;
color: #FFE3B9;
position: absolute;
width: 100%;
box-sizing: border-box;
padding-left: 18px;
padding-right: 50px;
bottom: 5px;
font-weight: bold;
}
.vip-price {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.vip-price-money.shu span {
font-size: 40px;
}
.vip-price-money.shu sub {
font-size: 12px;
line-height: 1;
border-radius: 50%;
margin-left: -11px;
vertical-align: middle;
padding: 2px 4px;
}
.vip-price-day {
font-size: 16px;
vertical-align: middle;
margin: 15px 0 0 5px;
color: #FFFFFF;
}
.vip-buy {
margin-top: 0;
}
.vip-buy {
display: flex;
justify-content: center;
margin-top: 20px;
}
.vip-list .type2 button {
width: 150px;
height: 40px;
line-height: 40px;
padding: 0;
font-size: 18px;
font-weight: 700;
border: 0 solid #ab0f00;
border-radius: 25px;
}
.vip-list .vip-item:nth-child(1) .vip-list-in h2 {
font-size: 28px;
color: #edd2aa;
}
.vip-list .vip-item:nth-child(2) .vip-list-in h2 {
font-size: 28px;
color: #edd2aa;
}
.vip-list .vip-item:nth-child(3) .vip-list-in h2 {
font-size: 28px;
color: #edd2aa;
}
.vip-list .vip-item:nth-child(4) .vip-list-in h2 {
font-size: 28px;
color: #edd2aa;
}
.vip-list .vip-item:nth-child(1) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left: 20px;
}
.vip-list .vip-item:nth-child(2) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left: 20px;
}
.vip-list .vip-item:nth-child(3) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left: 20px;
}
.vip-list .vip-item:nth-child(4) {
background-image: url(https://tk.sdklib.com/2022/01/09/e7bd9f4a7cdda.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left: 20px;
}
.new-sess-head {
text-align: center;
width: 100%;
font-weight: bold;
margin-top: 70px;
}
.new-sess-head span {
font-size: 30px;
color: #ab7225;
line-height: 27px;
display: flex;
align-items: center;
justify-content: center;
}
.new-sess-head span:before {
content: '';
background-image: url(https://tk.sdklib.com/2022/01/09/81c27c6d74190.png);
width: 37px;
height: 29px;
margin-right: 11px;
}
.new-sess-head span:after {
content: '';
background-image: url(https://tk.sdklib.com/2022/01/09/b6efa30bac286.png);
width: 37px;
height: 29px;
margin-left: 11px;
}
.newvip-sess2 ul {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-top: 40px;
margin-bottom: 40px;
}
.newvip-sess2 ul li p {
font-size: 20px;
color: #BA8D50;
margin-top: 10px;
text-align: center;
}
.vip-list .vip-item:nth-child .lv,{
display: none;
}
.vip-list .vip-item:nth-child(1) .vip-price-money.shu sub {
background: #fa4c56;
}
.vip-list .vip-item:nth-child(2) .vip-price-money.shu sub {
background: #fa4c56;
}
.vip-list .vip-item:nth-child(3) .vip-price-money.shu sub {
background: #fa4c56;
}
.vip-list .vip-item:nth-child(4) .vip-price-money.shu sub {
background: #6c6c6c;
}
.newvip-sess2 ul li {
width: 24%;
height: 150px;
background: #f9f9f9;
border: 1px solid #f2f2f2;
text-align: center;
padding-top: 26px;
margin-right: 10px;
margin-bottom: 10px;
background-repeat: no-repeat;
background-position: -4px -4px;
}
.vip-list .vip-item:hover {
box-shadow: 0 12px 36px -12px #403a3b;
}
.vip-list .vip-item:nth-child(1) .type2 button {
background: linear-gradient(
90deg, #ffc8c2, #f5c8c3);
box-shadow: 1px 2px 7px 0px #ab0f00;
color: #F54253;
}
.vip-list .vip-item:nth-child(2) .type2 button {
background: linear-gradient(
90deg, #ffc8c2, #f5c8c3);
box-shadow: 1px 2px 7px 0px #ab0f00;
color: #F54253;
}
.vip-list .vip-item:nth-child(3) .type2 button {
background: linear-gradient(
90deg, #ffc8c2, #f5c8c3);
box-shadow: 1px 2px 7px 0px #ab0f00;
color: #F54253;
}
.vip-list .vip-item:nth-child(4) .type2 button {
background: linear-gradient(
90deg, #caaa7c, #f0d6ae);
box-shadow: 1px 2px 7px 0px rgb(64 39 2 / 59%);
color: #414141;
}
.shengm svg {
bottom: -0.2em;
position: relative;
}
.shengms svg{
bottom: -0.25em;
position: relative;
}
.warr, .tax-collection .content-area, .tax-newsflashes_tags .content-area, .post-type-archive-newsflashes .content-area, .all-circles.content-area, .announcement-page.content-area, .single-announcement .content-area, .post-style-2 .content-area, .create-circle.content-area, .mission-page.wrapper, .search .b2-single-content, .search .tax-search, #carts .vip-page {
width: 1200px;
max-width: 100%;
margin: 0 auto;
}
@media screen and (max-width:768px) {
.vip-list .vip-item:nth-child(1) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left:1px;
}
.vip-list .vip-item:nth-child(2) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left:1px;
}
.vip-list .vip-item:nth-child(3) {
background-image: url(https://tk.sdklib.com/2022/01/09/6f33cb70722b3.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left:1px;
}
.vip-list .vip-item:nth-child(4) {
background-image: url(https://tk.sdklib.com/2022/01/09/e7bd9f4a7cdda.png);
box-shadow: 0 12px 36px -12px #d0a360;
margin-left:1px;
}
.vip-item {
width: 100%;
height: 200px;
}
.banner-container {
height: 188px;
padding-top: 50px;
}
.banner-container h2 {
font-size: x-large;
letter-spacing: 2px;
margin-bottom: 0;
}
.vip-list-in .tequan-type-head {
left: 25%;
top: 15%;
}
.tequan-type-head span {
display: none;
}
.vip-price-money.shu span {
font-size: xx-large;
}
.vip-list .type2 button {
width: 100px;
font-size: medium;
}
#vips .warr {
width: 100%;
padding: 0 10px;
}
.newvip-sess2 ul {
margin-right: -20px;
}
.newvip-sess2 ul li {
width: 50%;
margin-right: 0px;
margin-bottom: 10px;
}
.newvip-sess2 ul li p {
font-size: large;
}
.vip-item {
width: 500px;
height: 200px;
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
text-align: center;
position: relative;
border-radius: 16px;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
}
/*新会员页面结束*/
</style>
<div id="vips" v-cloak>
<div class="banner-container">
<div class="warr">
<h2>尊贵VIP会员尊享超值特权</h2>
<div class="desc clearfix">
<div class="vip-current" v-if="data.user">
<span v-if="data.user == 'guest'">您当前为游客，请登录后操作</span>
<span v-else-if="!data.user.vip.lv">您当前为普通用户，推荐升级成高级会员！</span>
<div v-else="">
您当前为
<span v-html="data.user.vip.icon"></span>，有效期至：
<span v-text="data.user.time === 'long' ? '终身' : data.user.time"></span>
</div>
</div>
</div>
</div>
</div>
<div class="content-area vip-page wrapper">
<main id="main" class="site-main b2-radius" ref="vips">
<div class="vip-list">
<div class="vip-item" v-for="(item,index) in data.data">
<p red="" class="txt_tag"><span><b id="zx">加入{{parseInt(item.count)}}<?php echo __('人','b2'); ?><br /></b><b id="hd">加入{{parseInt(item.count)}}<?php echo __('人','b2'); ?></b></span></p>
<div class="vip-list-in">
<div class="tequan-type-head">
<h2 v-text="item.name"></h2>
<p class=lv v-if="index==0" >一对一指导服务包括远程协助</p>
<p class=lv v-if="index==0" >全场需付费商品五折</p>
<p class=lv v-if="index==1" >一对一指导服务包括远程协助</p>
<p class=lv v-if="index==1" >全场需付费商品五折</p>
<p class=lv v-if="index==2" >一对一指导服务包括远程协助</p>
<p class=lv v-if="index==2" >全场需付费商品五折</p>
<p class=lv v-if="index==3" >一对一指导服务包括远程协助</p>
<p class=lv v-if="index==3" >全场需付费商品五折</p>
<p class=lv> 每日可免费下载素材：{{item.allow_download_count}}个</p>
</div>
<div class="type2">
<div class="vip-price">
<div class="vip-price-money shu">
￥
<span v-text="item.price"></span>
<sub>元</sub>
</div>
<div class="vip-price-day shu">
<span v-if="item.time > 0">{{item.time}}天</span>
<span v-else="">终身</span>
</div>
</div>
<div class="vip-buy">
<button @click="join('vip'+index,item.name,item.price)"> <span v-if="item.allow_buy === false">续签会员</span> <span v-else="">立刻加入</span> </button>
</div>
</div>
</div>
</div>
<p align="center">温馨提示：请勿与他人共享账号或代下资源。</p>
</div>
<div class="newvip-session newvip-sess2">
<div class="warr">
<h2 class="new-sess-head"> <span>VIP会员核心特权</span></h2>
<ul>
<li>
<svg t="1609844382361" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27903" width="64" height="64" class="icon2">
<path d="M867.726 781.404L761.162 674.865c30.659-46.834 48.65-102.708 48.65-162.865 0-164.463-133.35-297.804-297.813-297.804-60.148 0-116.022 17.982-162.856 48.65L242.56 156.272C317.524 99.421 410.669 65.291 512 65.291c246.701 0 446.708 199.98 446.708 446.709 0 101.33-34.13 194.466-90.982 269.404z m-206.83-232.175v74.447H549.239v111.679H474.78V623.676H363.102V549.23H474.78V512H363.102v-74.458h37.22l-37.22-74.448h74.44l37.238 74.448h74.458l37.22-74.448h74.439l-37.22 74.448h37.22V512h-111.66v37.229h111.66zM214.189 512c0 164.47 133.35 297.812 297.811 297.812 50.22 0 97.492-12.556 139.004-34.516l108.502 108.476c-70.863 47.28-155.93 74.937-247.506 74.937-246.684 0-446.708-200.016-446.708-446.709 0-91.575 27.656-176.633 74.945-247.513l108.467 108.51C226.733 414.51 214.188 461.78 214.188 512z m0 0" p-id="27904" data-spm-anchor-id="a313x.7781069.0.i39" fill="#BA8D50"></path>
</svg><p>全站免费下载</p></li>
<li>
<svg t="1609844168296" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20428" width="64" height="64" class="icon2">
<path d="M808.69318 418.758038c25.638642 0 39.259774 30.333585 22.296151 49.499773L354.674765 1006.08966a29.773283 29.773283 0 0 1-49.654339-31.415547l160.941886-377.315019H213.304803a29.773283 29.773283 0 0 1-28.246943-39.143849L363.678237 20.383396A29.753962 29.753962 0 0 1 391.92518 0h357.240755a29.753962 29.753962 0 0 1 25.889811 44.476377L562.16035 418.758038h246.53283z" p-id="20429" fill="#BA8D50"></path>
</svg><p>专属高速下载通道</p></li>
<li>
<svg t="1609844347551" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25714" width="64" height="64" class="icon2">
<path d="M942.6 444.1v-222.5c0-50.2-43.1-86.1-86.1-86.1h-689c-43.1 0-86.1 35.9-86.1 86.1v445c0 50.2 43.1 86.1 86.1 86.1h330.1v43.1H368.4c-21.5 0-43.1 21.5-43.1 43.1 0 21.5 21.5 43.1 43.1 43.1h351.7c21.5 0 43.1-21.5 43.1-43.1 0-21.5-21.5-43.1-43.1-43.1h-129.2v-43.1h43.1V444.1h308.6z" fill="#BA8D50" p-id="25715" data-spm-anchor-id="a313x.7781069.0.i32" class="selected"></path>
<path d="M820.5 566.1l78.9-78.9H677v222.5l78.9-78.9L870.8 738.3l57.4-64.6-107.7-107.6z" fill="#BA8D50" p-id="25716" data-spm-anchor-id="a313x.7781069.0.i33">
</path>
</svg><p>免费远程协助</p></li>
<li>
<svg t="1609844295664" viewbox="0 0 1102 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24770" width="64" height="64" class="icon2">
<path d="M196.923077 677.415385l102.4 55.138461-47.261539 23.630769 299.323077 157.538462 299.323077-157.538462-47.261538-23.630769 102.4-55.138461 149.661538 78.76923L551.384615 1024 47.261538 756.184615l149.661539-78.76923z m7.876923-244.184616l102.4 55.138462-55.138462 31.507692 299.323077 157.538462 299.323077-157.538462-63.015384-31.507692 102.4-55.138462 165.415384 86.646154L551.384615 787.692308 47.261538 519.876923l157.538462-86.646154zM551.384615 0l504.123077 267.815385L551.384615 535.630769 47.261538 267.815385 551.384615 0z m0 110.276923l-299.323077 157.538462 299.323077 157.538461 299.323077-157.538461-299.323077-157.538462z" fill="#BA8D50" p-id="24771" data-spm-anchor-id="a313x.7781069.0.i26"></path>
</svg><p>高级资源抢先使用</p></li>
<li>
<svg t="1609844418342" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28782" width="64" height="64" class="icon2">
<path d="M919.438 569.344v-29.013c2.276-132.551-36.636-244.054-113.322-323.13-36.637-37.773-80.783-66.218-131.983-86.015C665.941 59.733 589.255 3.3 495.73 3.3c-93.526 0-170.894 56.32-178.404 127.886-51.2 19.797-95.346 48.242-131.982 86.016-76.686 79.075-115.712 190.009-113.323 322.56v35.498c-19.797 20.367-35.498 50.518-23.78 93.526 8.762 31.971 31.972 55.182 60.417 65.65 14.563 9.33 31.402 14.563 49.948 14.563 36.637 160.427 168.505 269.653 341.22 269.653 172.6 0 304.583-109.226 341.22-270.222 1.137 0 2.275 0.57 3.526 0.57 22.642 0 43.577-8.193 60.416-21.505 21.504-12.174 38.344-33.11 45.284-59.278 12.174-46.649-8.192-78.62-30.834-98.873zM818.29 657.067c0 21.504-1.707 41.87-4.665 61.553-56.32 90.681-149.39 149.96-264.989 162.703-8.76-11.606-26.168-19.229-46.535-19.229-29.013 0-52.337 15.702-52.337 35.499 0 19.228 23.21 35.499 52.337 35.499 26.17 0 47.104-12.744 51.77-29.696 37.205-4.096 72.703-13.312 106.381-26.738 47.673-19.229 89.544-47.673 124.928-83.74 5.803-5.803 11.037-11.606 16.27-17.978-41.87 128.57-154.054 211.058-299.918 211.058h-1.137c-187.734 0-318.464-135.395-318.464-328.931l-0.57-18.546c0-8.192 1.139-30.265 2.276-51.2 77.938-28.445 148.253-137.216 176.697-187.165 26.17 35.5 86.016 103.993 177.835 139.492 34.247 13.312 69.177 20.366 103.424 27.876 68.039 14.563 132.551 28.444 176.128 85.447l1.707 1.706-1.138 2.39z m0 0" fill="#BA8D50" p-id="28783" data-spm-anchor-id="a313x.7781069.0.i46"></path>
</svg><p>VIP专属客服</p></li>
<li>
<svg t="1609844473437" viewbox="0 0 1160 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30240" width="64" height="64" class="icon2">
<path d="M903.103143 0.653662a60.121597 60.121597 0 0 1 46.050585 29.421208L1151.26463 348.591417a56.284049 56.284049 0 0 1 0 60.121598L612.72862 1006.091439a53.725683 53.725683 0 0 1-75.471793 0L10.233463 413.829746a62.679963 62.679963 0 0 1 0-60.121597H0L205.94845 30.07487A44.771402 44.771402 0 0 1 255.836584 0.653662h652.383291zM312.120633 303.820015a51.167317 51.167317 0 0 0-75.471792 0 48.608951 48.608951 0 0 0 0 74.192609L537.256827 713.15855a55.004866 55.004866 0 0 0 75.471793 0l310.84145-338.983474a70.355061 70.355061 0 0 0 20.466926-49.888134 79.309341 79.309341 0 0 0-15.350195-24.304476 55.004866 55.004866 0 0 0-75.471792 0L582.028229 598.032087z" fill="#BA8D50" p-id="30241" data-spm-anchor-id="a313x.7781069.0.i53"></path>
</svg><p>荣耀标识</p></li>
<li>
<svg t="1609844539748" viewbox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33922" width="64" height="64" class="icon2">
<path d="M607.315 635.883c-10.094-3.75-20.124-7.308-30.09-10.587-6.322-2.08-59.02-30.368-21.323-95.883h-0.322c65-66.951 114.657-174.728 114.657-280.812C670.237 85.489 561.774 0 435.737 0 309.594 0 201.71 85.489 201.71 248.6c0 106.514 49.441 214.74 114.806 281.52 25.46 66.844-20.188 91.425-29.64 95.176C50.643 719.12 0 845.972 0 845.972V1024h400.74l68.323-249.287 138.252-138.83z m252.608 41.062l-38.554-38.64 0.214-0.236-51.627-51.564-234.843 232.742c-3.214 2.593-5.957 5.894-7.2 10.159L473.349 1024l199.052-50.149c3.986-1.178 7.072-3.643 9.601-6.622l235.4-233.32-57.243-57.2-0.236 0.236z m-322.902 287.22s23.445-93.312 27.067-109.942c49.85 21.388 83.475 83.452 83.475 83.452l-110.542 26.49zM791.28 563.06l147.467 147.424 33.733-31.632-147.49-147.446-33.71 31.654z m219.969-2.122l-70.68-70.637c-19.503-19.502-50.963-19.695-70.251-0.386l-21.667 21.881 141.274 141.339 21.71-21.946c19.287-19.245 19.116-50.727-0.386-70.251z m0 0" p-id="33923" data-spm-anchor-id="a313x.7781069.0.i59" fill="#BA8D50"></path>
</svg><p>发帖免审核</p></li>
<li>
<svg t="1609846948801" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36178" width="64" height="64" class="icon2">
<path d="M153.856 214.6816h71.2192l-0.2048 179.5072H106.8544v51.6608l122.6752-0.7168 54.3232-52.0704-0.4096-226.2528-117.1456 0.256 3.328-16.9472H105.0624l-23.3984 91.7504h64.6144l7.5776-27.1872zM114.6368 147.456l61.696-16.9472v-20.0192l35.6352 0.2048 0.2048 34.9696 60.3648-15.1552 0.4096-18.8928h7.5776l13.3632-50.3296h-20.9408V43.008H212.1728v18.2784h-35.84V43.008H114.6368v18.2784h-25.1392v50.3296l25.1392-0.256v36.096z" fill="#BA8D50" p-id="36179" data-spm-anchor-id="a313x.7781069.0.i67" class="selected"></path>
<path d="M214.1696 340.736V251.1872H98.4064v131.84h65.024z m-64.1024-47.2064h13.3632v47.4112h-13.3632zM484.3008 147.6608H411.904l-28.2624 61.9008-21.8112-47.2064H289.2288l58.7776 126.2592L277.6576 443.392l72.3456-0.4608 34.5088-75.7248 33.1776 71.2704 72.3968 0.4608-69.7344-150.528 63.9488-140.7488zM381.184 39.8848H317.2864l-28.7232 108.4416h64.768l11.1616-38.2976 113.5616 0.256 12.6976-46.1312H374.9376l6.2464-24.2688zM556.4416 441.1392h77.4656l24.064-51.8656h-32.512V159.232h-93.2864v51.9168h24.2688v229.9904zM572.0064 116.736a40.2432 40.2432 0 0 0 20.48 5.12 37.2224 37.2224 0 0 0 20.0192-5.12 39.4752 39.4752 0 0 0 14.6944-14.8992 42.24 42.24 0 0 0 5.5808-20.48 39.2192 39.2192 0 0 0-5.5808-20.48 36.2496 36.2496 0 0 0-15.36-14.8992 39.5264 39.5264 0 0 0-19.3536-5.12 45.5168 45.5168 0 0 0-19.6096 5.5808 35.2256 35.2256 0 0 0-15.36 14.6944 41.2672 41.2672 0 0 0 0 40.5504 39.3216 39.3216 0 0 0 14.4896 15.0528zM934.5024 175.5136h-103.7312v-18.2784H911.36l20.48-41.1648h-101.0688v-19.4048h81.5104l20.6848-40.96h-102.1952l-0.256-17.6128h-69.0176v17.6128h-89.9584v40.7552h89.9584v19.3536h-91.4944v41.216h91.7504v18.4832h-97.1264v40.2944h249.1904l20.6848-40.2944zM792.6784 403.0464v40.0896h67.6864l66.6112-40.0896V230.9632h-258.56v213.0944l65.6896-29.6448 3.1232-1.536v-37.632h100.4544l9.1136-32.9728h-109.568v-19.1488l105.5744 0.256 9.984-33.2288h-115.5584v-20.0192h120.4736v132.9152h-65.024zM85.248 982.2208h67.2768L179.2 903.2192H113.7664l-28.5184 79.0016zM276.736 637.7472h3.7888l16.0256-45.4144-19.8144-0.4096v-16.7424H211.3024v16.7424h-48.128v-16.7424H97.7408v16.7424h-12.032v46.08h12.032v213.3504h-11.3664v44.544h193.9456l18.2272-44.544h-21.8112z m-65.4336 213.3504h-48.3328v-45.4144h48.3328z m0-88.832h-48.3328v-41.4208h48.3328z m0-83.7632h-48.3328v-40.96h48.3328zM200.3456 904.0896l30.7712 77.7216 66.0992-0.2048-31.3856-77.5168H200.3456zM300.5952 915.456h0.4096v71.0144l65.28-28.7232v-91.2896h30.72l19.1488-27.1872v92.16h-33.6384v47.2064l34.048-0.6656 65.4848-46.08v-350.976H300.5952z m65.6896-288.6144h49.8688v76.8h-49.8688z m0 122.88h30.72l19.1488-27.136v97.28h-49.8688zM651.0592 576.1024h-66.816l-54.7328 107.9808h69.4272l52.1216-107.9808zM532.1728 806.5536h26.4704v177.2544l66.6112-24.7296v-221.3376l16.0256-44.0832v-0.2048h-64.3584l-44.7488 113.1008zM645.7344 709.0176v46.5408h267.6224l21.1456-46.5408h-117.5552V653.824h85.0944l22.6816-46.7968H817.152v-33.8432h-69.0176v33.8432h-97.536v46.7968h97.536v55.1936h-102.4zM893.7984 764.0064h-69.2736v30.5152h-179.0464v46.336h179.0464l-0.2048 88.6272h-43.008v46.7456h65.9456l46.08-52.5312 0.2048-82.8416h24.9344l20.736-46.336h-45.4144v-30.5152z" fill="#BA8D50" p-id="36180" data-spm-anchor-id="a313x.7781069.0.i65" class="selected"></path><path d="M732.16 868.2496a48.0768 48.0768 0 0 0-19.6096-5.376 44.9024 44.9024 0 0 0-20.0704 5.12 38.2464 38.2464 0 0 0-15.36 15.36 40.96 40.96 0 0 0-5.5808 20.48 38.9632 38.9632 0 0 0 5.12 20.48 41.3696 41.3696 0 0 0 15.36 15.36 38.4512 38.4512 0 0 0 20.48 5.12 40.0896 40.0896 0 0 0 20.48-5.5808 39.0656 39.0656 0 0 0 15.36-15.36 39.5776 39.5776 0 0 0 5.12-20.48 42.24 42.24 0 0 0-5.5808-20.48 36.1472 36.1472 0 0 0-15.7184-14.6432z" fill="#BA8D50" p-id="36181" data-spm-anchor-id="a313x.7781069.0.i66" class="selected"></path>
</svg><p>更多特权上线中</p></li>
</ul>
</div>
<div class="vip-footer">
<h2 class="new-sess-head"> <span>常见问题解答</span></h2>
<div class="vip-faq box">
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('开通VIP的好处？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('VIP会员根据等级在相应的有效期内享有本站所有资源免费下载资源的权力，免费查看隐藏内容的权力，免费查看视频的权力，同时本站商品还会获得打折价格，并且拥有其他特殊的权力。','b2'); ?></p>
</div>
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('VIP资源需要单独购买吗？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('不同的VIP拥有不同的权限，通常VIP会员拥有免费资格享受各种资源的权力，但不排除某些特殊情况。','b2'); ?></p>
</div>
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('VIP会员是否无限次下载资源？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('在遵守VIP会员协议前提下，VIP会员在会员有效期内可以下载所有免费和VIP资源。','b2'); ?></p>
</div>
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('是否可以与他人分享VIP会员账号？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('一个VIP账号仅限一个人使用，禁止与他人分享账号，一经发现做永久封号处理。','b2'); ?></p>
</div>
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('是否可以申请退款？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('VIP会员属于虚拟服务，付款后不能够申请退款。如付款前有任何疑问，联系站长处理','b2'); ?></p>
</div>
<div class="vip-faq-list" @click.stop="showAc($event)">
<h2><?php echo __('遇到付款失败，付款后没有生效怎么办？','b2'); ?></h2>
<p class="b2-hidden"><?php echo __('理论上来说正常付款后不会出现此类问题，但是也会有部分用户因为网络等原因导致在付款的过程中会有一些小插曲，如果出现类似问题，大可不必惊慌，本站所有支付都会生成订单，不管成功还是失败，所以如果真正遇到网络问题导致付款失败您又不知道是否成功，请查看自己的个人中心的订单管理，截图联系管理员处理。','b2'); ?></p>
</div>
</div>
</main>
</div>
</div>
<?php
get_footer();包图导航区块使用方法 – 放入CSS至主题或子主题（style.css）文件 – 然后主题设置 – 模块设置 – 新增模块 – 自定义将HTML放入模块代码中
CSS：
@font-face {
font-family: "iconfont"; /* Project id 2767461 */
src: url('iconfont.woff2?t=1635234920404') format('woff2'),
url('iconfont.woff?t=1635234920404') format('woff'),
url('iconfont.ttf?t=1635234920404') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-weixinzhifu:before {
content: "\e689";
}
.icon-zhifu-zhifubao:before {
content: "\e6bd";
}
.icon-shoucang1:before {
content: "\e60a";
}
.icon-wujiaoxingxingxingshoucang:before {
content: "\e623";
}
.icon-sousuo1:before {
content: "\e650";
}
.icon-jiantou3:before {
content: "\e66a";
}
.icon-jingshitishi:before {
content: "\e669";
}
.icon-shouquan:before {
content: "\e667";
}
.icon-baozhangjin:before {
content: "\e668";
}
.icon-duoyonghu:before {
content: "\e666";
}
.icon-wenjianxiazai:before {
content: "\e684";
}
.icon-zhekou2:before {
content: "\e696";
}
.icon-iconfontclose:before {
content: "\e665";
}
.icon-youjiantou:before {
content: "\e663";
}
.icon-zuojiantou:before {
content: "\e664";
}
.icon-xiazai-copy:before {
content: "\e661";
}
.icon-shouji:before {
content: "\e662";
}
.icon-qq:before {
content: "\e882";
}
.icon-gou2:before {
content: "\e660";
}
.icon-jingyin:before {
content: "\e64c";
}
.icon-xiugai:before {
content: "\e651";
}
.icon-guanbikaiqi:before {
content: "\e656";
}
.icon-yinliang:before {
content: "\e65b";
}
.icon-xiaoxi1:before {
content: "\e65c";
}
.icon-shoucang:before {
content: "\e65d";
}
.icon-xiangji:before {
content: "\e65e";
}
.icon-xin:before {
content: "\e65f";
}
.icon-kefu1:before {
content: "\e608";
}
.icon-changjianwenti:before {
content: "\e675";
}
.icon-fenleivip:before {
content: "\e657";
}
.icon-tequan:before {
content: "\e658";
}
.icon-gerenzhongxin:before {
content: "\e659";
}
.icon-shoujihaotianxie:before {
content: "\e65a";
}
.icon-guanbi:before {
content: "\e64e";
}
.icon-gou:before {
content: "\e652";
}
.icon-jianshao:before {
content: "\e653";
}
.icon-tianjia:before {
content: "\e654";
}
.icon-xiazai:before {
content: "\e655";
}
.icon-weidenglutouxiang:before {
content: "\e64f";
}
.icon-baotuwanglogodanse:before {
content: "\e66e";
}
.icon-fanhuidingbu:before {
content: "\e63d";
}
.icon-kefu:before {
content: "\e63e";
}
.icon-weixin:before {
content: "\e641";
}
.icon-xiala:before {
content: "\e642";
}
.icon-bofang:before {
content: "\e644";
}
.icon-liwu:before {
content: "\e645";
}
.icon-you:before {
content: "\e647";
}
.icon-zuo:before {
content: "\e648";
}
.icon-yijianfankui:before {
content: "\e649";
}
.icon-weibo:before {
content: "\e64a";
}
.icon-sousuo:before {
content: "\e64b";
}
.icon-zanting:before {
content: "\e64d";
}
ul.sort-config.swiper-slide.swiper-slide-active {
margin-left: 8px;
}
ul.sort-config.swiper-slide.swiper-slide-duplicate.swiper-slide-duplicate-active {
display: none !important;
}
ul.sort-config.swiper-slide.swiper-slide-next.swiper-slide-duplicate-prev {
display: none !important;
}
.sort-config-next {
display: none !important;
}
.sort-config-prev {
display: none !important;
}
img.sort-vips-icon {
width: 33px;
height: 40px;
}
@media screen and (max-width:1300px) {
.sort {
padding:20px
}
.sort-config-next {
right:5px;
top:16px;
outline:none
}
.sort-config-next .sort-next-wrap {
width:30px;
height:30px;
line-height:30px;
text-align:center
}
.sort-config-next .icon-you {
font-size:14px
}
.sort-config-prev {
left:-5px;
top:16px;
outline:none
}
.sort-config-prev .sort-next-wrap {
width:30px;
height:30px;
line-height:30px;
text-align:center
}
.sort-config-prev .icon-you {
font-size:14px
}
.sort-config-icon {
width:52px;
height:52px
}
.sort-config-title {
line-height:28px
}
.sort-config-desc {
line-height:20px
}
.sort-blocks-item {
width:180px
}
.srot-mine {
width:364px
}
}
.sort {
position:relative;
top:-127px;
z-index:3;
padding:30px;
background:hsla(0, 0%, 100%, .96);
border:1px solid #fff;
-webkit-box-shadow:0 40px 75px 0 rgba(57, 60, 67, .08);
box-shadow:0 40px 75px 0 rgba(57, 60, 67, .08);
border-radius:20px;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px)
}
.sort-config-next {
position:absolute;
right:20px;
top:31px;
z-index:3;
width:60px;
height:60px;
cursor:pointer
}
.sort-config-next, .sort-config-next .sort-next-wrap {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.sort-config-next .sort-next-wrap {
width:40px;
height:40px;
background:#fff;
border-radius:50%;
-webkit-box-shadow:0 6px 25px 0 rgba(65, 68, 76, .12);
box-shadow:0 6px 25px 0 rgba(65, 68, 76, .12)
}
.sort-config-next .sort-next-wrap:hover {
-webkit-box-shadow:0 6px 25px 0 rgba(65, 68, 76, .2);
box-shadow:0 6px 25px 0 rgba(65, 68, 76, .2)
}
.sort-config-prev {
position:absolute;
left:0;
top:31px;
z-index:3;
width:60px;
height:60px;
cursor:pointer
}
.sort-config-prev, .sort-config-prev .sort-next-wrap {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.sort-config-prev .sort-next-wrap {
width:40px;
height:40px;
background:#fff;
border-radius:50%;
-webkit-box-shadow:0 6px 25px 0 rgba(65, 68, 76, .12);
box-shadow:0 6px 25px 0 rgba(65, 68, 76, .12)
}
.sort-config-prev .sort-next-wrap:hover {
-webkit-box-shadow:0 6px 25px 0 rgba(65, 68, 76, .2);
box-shadow:0 6px 25px 0 rgba(65, 68, 76, .2)
}
.sort-config-prev .icon-you {
-webkit-transform:rotate(180deg);
transform:rotate(180deg)
}
.sort-swiper-container {
position:relative;
overflow:hidden;
height:62px
}
.sort-config {
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.sort-config>li {
width:16.66667%;
overflow:hidden;
height:100%
}
.sort-config-item {
display:block;
height:100%
}
.sort-config-item:hover .sort-config-desc, .sort-config-item:hover .sort-config-title {
color:#ff7d04
}
.sort-config-item:hover .sort-config-icon {
opacity:.8
}
.sort-config-icon {
width: 62px !important;
height:62px;
margin-right:12px
}
.sort-config-icon, .sort-config-title {
float:left;
-webkit-transition:.3s;
transition:.3s
}
.sort-config-title {
position:relative;
line-height:34px;
font-size:18px;
font-weight:600;
color:#2d2d2d
}
.sort-title-icon {
display:block;
position:absolute;
top:0;
right:-10px;
min-width:18px;
min-height:18px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:3px;
line-height:12px;
text-align:center;
font-size:12px;
color:#fff;
border-radius:4px;
background-color:red;
-webkit-transform:translate(100%);
transform:translate(100%)
}
.sort-title-icon.icon--xin {
background-color:#ff9600
}
.sort-title-icon.icon--bao {
background-color:#c30202
}
.sort-config-desc {
float:left;
line-height:22px;
font-size:14px;
color:#8e8e8e;
-webkit-transition:.3s;
transition:.3s
}
.sort-blocks {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
height:124px;
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-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, .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-title {
bottom:0;
height:22px;
margin:auto;
font-size:22px;
font-weight:500;
letter-spacing:1px
}
.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))
}
.sort-blocks--hover1:hover {
background:#fff;
-webkit-box-shadow:0 10px 15px 0 rgba(150, 165, 185, .2);
box-shadow:0 10px 15px 0 rgba(150, 165, 185, .2)
}
.sort-blocks--hover2:hover .blocks-item-wrap {
-webkit-filter:blur(10px);
filter:blur(10px)
}
.sort-blocks--hover2:hover .blocks-hover {
opacity:1
}
.sort-blocks-icon {
display:block;
width:60px;
height:47px;
margin:18px auto 15px;
background-repeat:no-repeat;
background-size:cover
}
.sort-blocks-icon.icon-qiye {
background-image:url(https://tk.sdklib.com/2022/01/10/8b4865b2fdf86.png)
}
.sort-blocks-icon.icon-qiye:before {
display:none
}
.sort-blocks-icon.icon-zaixian {
background-image:url(https://tk.sdklib.com/2022/01/10/60f3e14b3062c.png)
}
.sort-blocks-icon.icon-quanqiu {
background-image:url(https://tk.sdklib.com/2022/01/10/64fb962f5959c.png)
}
.sort-blocks-icon.icon-chuangyi {
background-image:url(https://tk.sdklib.com/2022/01/10/77e4ba7354114.png)
}
.sort-blocks-title {
line-height:22px;
font-size:22px;
font-weight:500;
color:#2d2d2d;
letter-spacing:1px;
text-align:center
}
.srot-mine {
position:relative;
width:380px;
background:-webkit-gradient(linear, left top, right top, from(#fdf8eb), to(#feeec3));
background:linear-gradient(90deg, #fdf8eb, #feeec3);
border-radius:14px
}
.srot-mine-bg {
position:absolute;
top:13px;
right:-13px;
width:118px;
height:78px;
background:url(https://tk.sdklib.com/2022/01/10/7223fc7ca3454.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-tit .icon-weidenglutouxiang {
font-size:25px;
color:#ffe7b8
}
.srot-mine-tit>span {
margin-left:9px;
font-size:15px;
font-weight:600;
color:#613c14
}
.srot-mine-ava {
width:25px;
height:25px;
border-radius:50%;
}
.srot-mine-vips {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
width:302px;
margin:12px auto 0
}
.sort-vips-item {
display:block;
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
text-align:center
}
.sort-vips-item.active .sort-vips-icon, .sort-vips-item:hover .sort-vips-icon {
opacity:1
}
.sort-vips-item.active .sort-vips-tit, .sort-vips-item:hover .sort-vips-tit {
display:none
}
.sort-vips-item.active .sort-vips-tit2, .sort-vips-item:hover .sort-vips-tit2 {
display:block
}
.sort-vips-icon {
display:block;
width:34px;
height:40px;
margin:0 auto;
opacity:.3;
-webkit-transition:.3s;
transition:.3s
}
.sort-vips-tit, .sort-vips-tit2 {
margin-top:8px;
line-height:13px;
font-size:13px;
font-weight:600;
color:#613c14
}
.sort-vips-tit2 {
display:none
}
整体区块
<link rel="stylesheet" type="text/css" href="https://s.ibaotu.com/vendors/swiper/5.2.0/swiper.min.css">
<link rel="stylesheet" type="text/css" href="https://pic.sdklib.com/sdk-mains/2022/01/css/swiper.css">
<div class="sort">
<!-- 专题 -->
<div class="sort-config-next" tabindex="0" role="button" aria-label="Next slide">
<div class="sort-next-wrap"><i class="iconfont icon-you"></i>
</div>
</div>
<div class="sort-config-prev" tabindex="0" role="button" aria-label="Previous slide">
<div class="sort-next-wrap"><i class="iconfont icon-you"></i>
</div>
</div>
<div class="sort-swiper-container swiper-container swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1178px, 0px, 0px);">
<ul class="sort-config swiper-slide swiper-slide-duplicate swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 1178px;">
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-106-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/6ac0fc2581c8d.png" alt="">
<p class="sort-config-title">节日海报</p><span class="sort-config-desc">甄选素材海报模板</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/zhuangxiu/13-92174-0-0-3-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/5aa257f191c42.png" alt="">
<p class="sort-config-title">3D模型<span class="sort-title-icon icon--xin">新</span>
</p><span class="sort-config-desc">创意模型立体素材</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-91647-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/2b61cca091cc5.png" alt="">
<p class="sort-config-title">背景素材</p><span class="sort-config-desc">背景素材尝鲜应用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-91647-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/4d1af590c8144.png" alt="">
<p class="sort-config-title">设计元素</p><span class="sort-config-desc">基础元素无忧使用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-92114-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/8ed1448b83b4c.png" alt="">
<p class="sort-config-title">艺术字标<span class="sort-title-icon icon--xin">新</span>
</p><span class="sort-config-desc">作品标题随心选用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/zhuanti/" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/f4c9868d6514d.png" alt="">
<p class="sort-config-title">精品专题<span class="sort-title-icon">热</span>
</p><span class="sort-config-desc">精品佳作专辑推荐</span>
</a>
</li>
</ul>
<ul class="sort-config swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 1178px;">
<li>
<a class="sort-config-item" href="https://ibaotu.com/shipin/7-5023-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/06cb9a70bb720.png" alt="">
<p class="sort-config-title">AE模板</p><span class="sort-config-desc">视频模板随心挑选</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/shipin/7-5026-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="https://tk.sdklib.com/2022/01/10/ac559e316692a.png" alt="">
<p class="sort-config-title">实拍视频<span class="sort-title-icon">热</span>
</p><span class="sort-config-desc">实拍素材应有尽有</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/peiyue/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd483dad7c.png" alt="">
<p class="sort-config-title">配乐音效</p><span class="sort-config-desc">版权配乐无忧下载</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-100-0-0-3-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/12/31/61cea146dce0d.png" alt="">
<p class="sort-config-title">海报设计</p><span class="sort-config-desc">海报模板佳作上新</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/ui/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd671a03ad.png" alt="">
<p class="sort-config-title">UI新媒体</p><span class="sort-config-desc">线上推广宣传必备</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/ppt/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd708b791b.png" alt="">
<p class="sort-config-title">PPT模板</p><span class="sort-config-desc">办公商务精选素材</span>
</a>
</li>
</ul>
<ul class="sort-config swiper-slide swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="1" style="width: 1178px;">
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-106-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd4ba27f36.png" alt="">
<p class="sort-config-title">节日海报</p><span class="sort-config-desc">甄选素材海报模板</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/zhuangxiu/13-92174-0-0-3-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/12/31/61ce9e9c78d9a.png" alt="">
<p class="sort-config-title">3D模型<span class="sort-title-icon icon--xin">新</span>
</p><span class="sort-config-desc">创意模型立体素材</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-91647-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/12/31/61ce9fd35367c.png" alt="">
<p class="sort-config-title">背景素材</p><span class="sort-config-desc">背景素材尝鲜应用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-91647-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/12/31/61cea01fd7631.png" alt="">
<p class="sort-config-title">设计元素</p><span class="sort-config-desc">基础元素无忧使用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-92114-0-0-2-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/22/01/10/61dbfc9c0d639.png" alt="">
<p class="sort-config-title">艺术字标<span class="sort-title-icon icon--xin">新</span>
</p><span class="sort-config-desc">作品标题随心选用</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/zhuanti/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/22/01/10/61dbfbdb225d8.png" alt="">
<p class="sort-config-title">精品专题<span class="sort-title-icon">热</span>
</p><span class="sort-config-desc">精品佳作专辑推荐</span>
</a>
</li>
</ul>
<ul class="sort-config swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 1178px;">
<li>
<a class="sort-config-item" href="https://ibaotu.com/shipin/7-5023-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd3e12b1f0.png" alt="">
<p class="sort-config-title">AE模板</p><span class="sort-config-desc">视频模板随心挑选</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/shipin/7-5026-0-0-0-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd44a7417b.png" alt="">
<p class="sort-config-title">实拍视频<span class="sort-title-icon">热</span>
</p><span class="sort-config-desc">实拍素材应有尽有</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/peiyue/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd483dad7c.png" alt="">
<p class="sort-config-title">配乐音效</p><span class="sort-config-desc">版权配乐无忧下载</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/guanggao/1-100-0-0-3-1.html" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/12/31/61cea146dce0d.png" alt="">
<p class="sort-config-title">海报设计</p><span class="sort-config-desc">海报模板佳作上新</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/ui/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd671a03ad.png" alt="">
<p class="sort-config-title">UI新媒体</p><span class="sort-config-desc">线上推广宣传必备</span>
</a>
</li>
<li>
<a class="sort-config-item" href="https://ibaotu.com/ppt/" target="_blank">
<img class="sort-config-icon" src="//js.ibaotu.com/act/21/10/29/617bd708b791b.png" alt="">
<p class="sort-config-title">PPT模板</p><span class="sort-config-desc">办公商务精选素材</span>
</a>
</li>
</ul>
</div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
<div class="sort-blocks">
<a href="https://plus.ibaotu.com/newplus/home" target="_blank" class="sort-blocks-item sort-blocks--hover2" onclick="setPlusVip()">
<div class="blocks-item-wrap"><i class="sort-blocks-icon icon-qiye"></i>
<p class="sort-blocks-title">包图企业站</p>
</div>
<div class="blocks-hover">
<div class="blocks-hover-tit">企业专属平台</div>
<div class="blocks-hover-line"></div>
<p class="blocks-hover-desc">一站式解决</p>
<p class="blocks-hover-desc">企业所需问题</p>
</div>
</a>
<a href="https://editor.ibaotu.com/complex/index?hmsr=btzhsy" target="_blank" class="sort-blocks-item sort-blocks--hover2">
<div class="blocks-item-wrap"><i class="sort-blocks-icon icon-zaixian"></i>
<p class="sort-blocks-title">在线设计</p>
</div>
<div class="blocks-hover">
<div class="blocks-hover-tit">在线改图</div>
<div class="blocks-hover-line"></div>
<p class="blocks-hover-desc">30万+图片任你选择</p>
<p class="blocks-hover-desc">改图不求人</p>
</div>
</a>
<a href="https://plus.ibaotu.com/newplus/global" target="_blank" class="sort-blocks-item sort-blocks--hover2">
<div class="blocks-item-wrap"><i class="sort-blocks-icon icon-quanqiu"></i>
<p class="sort-blocks-title">企业专享</p>
</div>
<div class="blocks-hover">
<div class="blocks-hover-tit">企业专享</div>
<div class="blocks-hover-line"></div>
<p class="blocks-hover-desc">精选3000万+</p>
<p class="blocks-hover-desc">海外摄影图、视频</p>
</div>
</a>
<a href="https://plus.ibaotu.com/newplus/creativepro" target="_blank" class="sort-blocks-item sort-blocks--hover2">
<div class="blocks-item-wrap"><i class="sort-blocks-icon icon-chuangyi"></i>
<p class="sort-blocks-title">创意Pro</p>
</div>
<div class="blocks-hover">
<div class="blocks-hover-tit">创意Pro</div>
<div class="blocks-hover-line"></div>
<p class="blocks-hover-desc">专业创意素材</p>
<p class="blocks-hover-desc">单个、组合授权更灵活</p>
</div>
</a>
<!-- 我的权益 -->
<div class="srot-mine"><i class="srot-mine-bg"></i>
<div class="sort-mine-wrap">
<div class="srot-mine-tit">
<img class="srot-mine-ava" style=" width:25px; height:25px; border-radius:50%;" src="//s.ibaotu.com/ibaotu/img/index/ava.png" alt=""><span>我的权益</span>
</div>
<div class="srot-mine-vips">
<!-- 企业 -->
<a href="https://ibaotu.com/qyvip/?fromTypes=211" target="_blank" class="sort-vips-item">
<img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/person.b254.png" alt="">
<p class="sort-vips-tit">未开通</p>
<p class="sort-vips-tit2">企业VIP</p>
</a>
<!-- 个人 -->
<a href="https://ibaotu.com/?m=vip&a=cateVips&fromType=2" target="_blank" class="sort-vips-item">
<img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/ep.4814.png" alt="">
<p class="sort-vips-tit">未开通</p>
<p class="sort-vips-tit2">个人VIP</p>
</a>
<!-- 创意pro -->
<a href="https://plus.ibaotu.com/newplus/recharge" target="_blank" class="sort-vips-item">
<img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/create.503f.png" alt="">
<p class="sort-vips-tit">未开通</p>
<p class="sort-vips-tit2">创意Pro</p>
</a>
<!-- 编辑器 -->
<a href="https://editor.ibaotu.com/vip" target="_blank" class="sort-vips-item index-bjq-a">
<img class="sort-vips-icon" src="//s.ibaotu.com/next/img/new/design.16dc.png" alt="">
<p class="sort-vips-tit index-bjq-txt">未开通</p>
<p class="sort-vips-tit2">在线设计</p>
</a>
</div>
</div>
</div>
</div>
</div>用户模块 –
/*用户区块*/
.demo {
padding: 2em 0;
}
.our-team {
padding: 20px 0 0px;
background: #f7f5ec;
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
border-radius: 10px;
}
.demo .user-s-info-name {
margin-top: 0px;
display: flex;
flex-flow: column;
margin-left: 0px;
}
.demo .user-s-info-desc {
font-size: 13px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 100%;
background: #ffffff;
padding: 10px;
color: #bcbcbc;
height: 70px;
line-height: 35px;
text-align: center;
box-sizing: border-box;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
}
.our-team .pic {
display: inline-block;
width: 130px;
height: 130px;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
.our-team .pic:before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-image: linear-gradient(90deg,#ffc046,#ff7d04);
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 1;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before {
height: 100%;
}
.our-team .pic:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-image: linear-gradient(90deg,#ffc046,#ff7d04);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 24px;
}
.col-sm-6 {
cursor: pointer;
width: calc(20% - 10px);
border-radius: 4px;
background-size: 100% 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.our-team .pic img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .pic img {
box-shadow: 0 0 0 8px #f7f5ec;
transform: scale(0.8);
}
.our-team .team-content {
margin-bottom: 30px;
}
.our-team .title {
font-size: 22px;
font-weight: 700;
color: #4e5052;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 5px;
}
.our-team .post {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background: #fff;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: #fff;
transition: all 0.3s ease 0s;
}
.our-team .social li a:hover {
color: #eb1768;
background: #f7f5ec;
}
模块自定义HTML
<div class="demo">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic">
<img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220113134210259.jpg">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">Angelia</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>1520</b>
<i>lv0</i>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>文章</span>
<p>0</p>
</div>
<div>
<span>评论</span>
<p>0</p>
</div>
<div>
<span>粉丝</span>
<p>2</p>
</div>
<div>
<span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<button class="author-has-follow">已关注</button>
<button>私信</button>
</div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic">
<img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220108072310941.jpg">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">Angelia</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>实习设计</b>
<i>lv0</i>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>文章</span>
<p>0</p>
</div>
<div>
<span>评论</span>
<p>0</p>
</div>
<div>
<span>粉丝</span>
<p>2</p>
</div>
<div>
<span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<button class="author-has-follow">已关注</button>
<button>私信</button>
</div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic">
<img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220108072208126.jpg">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">Angelia</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>实习设计</b>
<i>lv0</i>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>文章</span>
<p>0</p>
</div>
<div>
<span>评论</span>
<p>0</p>
</div>
<div>
<span>粉丝</span>
<p>2</p>
</div>
<div>
<span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<button class="author-has-follow">已关注</button>
<button>私信</button>
</div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic">
<img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220107114343979.jpg">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">Angelia</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>实习设计</b>
<i>lv0</i>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>文章</span>
<p>0</p>
</div>
<div>
<span>评论</span>
<p>0</p>
</div>
<div>
<span>粉丝</span>
<p>2</p>
</div>
<div>
<span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<button class="author-has-follow">已关注</button>
<button>私信</button>
</div>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="our-team b2-radius">
<div class="pic">
<img src="https://img.onecad.cn/wp-content/uploads/2022/01/20220107093504558.jpg">
</div>
<div class="i-content">
<div class="user-s-info-name">
<h3 class="title">Angelia</h3>
<p>
<span class="lv-icon user-lv b2-lv0">
<b>实习设计</b>
<i>lv0</i>
</span>
</p>
</div>
<div class="user-s-data">
<div>
<span>文章</span>
<p>0</p>
</div>
<div>
<span>评论</span>
<p>0</p>
</div>
<div>
<span>粉丝</span>
<p>2</p>
</div>
<div>
<span>关注</span>
<p>0</p>
</div>
</div>
<div class="user-s-info-desc">
这个人很懒，什么都没有留下！
</div>
</div>
<ul class="social">
<div class="user-s-follow">
<button class="author-has-follow">已关注</button>
<button>私信</button>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
用户区块
CSS
/*人物模块1*/
#n-210120 .index-section {
margin-top: 20px;
}
/*标题*/
#n-210120 .index-section .title-wrap {
position: relative;
margin-bottom: 15px;
width: 1180px;
}
#n-210120 .index-section .title-wrap h2.section-title {
display: inline-block;
font-size: 24px;
}
#n-210120 .index-section .title-wrap h2.section-title span {
margin-left: 12px;
color: #999;
}
#n-210120 .index-section .title-wrap a.more-link {
position: absolute;
line-height: 36px;
right: 0;
font-size: 14px;
color: #333;
font-weight: bold;
}
/*人物模块*/
#n-210120 .wp {
padding: 0;
width: 1180px;
clear: both;
margin: 0 auto;
}
#n-210120 .cl {
zoom: 1;
}
.index-creator-list .itme {
position: relative;
float: left;
width: 280px;
text-align: center;
font-size: 12px;
line-height: 22px;
color: #999;
background-color: rgb(255, 255, 255);
margin: 0 20px 20px 0px;
}
.index-creator-list .itme:nth-child(4n) {
margin-right: 0;
}
.index-creator-list .itme:hover {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
}
.index-creator-list .i-banner {
position: relative;
height: 120px;
background: #ccc;
}
.index-creator-list .i-banner .i-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.index-creator-list .i-banner .avatar-wrap {
position: absolute;
left: 50%;
bottom: 0;
margin: -42px;
}
.index-creator-list .avatar-wrap img {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
}
.index-creator-list .itme .i-content {
padding: 54px 8px 8px 8px;
}
.index-creator-list .itme .i-inline {
height: 28px;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
}
.index-creator-list .itme .i-username {
color: #333;
font-size: 16px;
font-weight: bold;
}
.index-creator-list .itme .i-follow {
margin-top: 10px;
}
.index-creator-list .itme .i-follow span {
color: #333;
font-weight: bold;
}
@media only screen and (max-width: 990px) {
.our-team {
margin-bottom: 30px;
}
}
模块HTML
<div id="n-210120">
<div class="index-section">
<div class="title-wrap">
<h2 class="section-title">优秀创作人<span>CREATOR</span></h2>
<a href="#" class="more-link" target="_blank" title="点击查看更多服装设计师、时尚买手、服装跟单等服装人">更多
-
HIP-HOP排行榜</a>
</div>
<div class="content-wrap">
<div class="index-creator-list cl wp">
<div class="itme fall-ele">
<a href="#" rel="nofollow" target="_blank">
<div class="i-banner">
<img src="https://img.zcool.cn/community/0196885e4e2b44a8012165182e783d.jpg@520w_390h_1c_1e_2o_100sh.jpg" alt="AllanXu3000" class="i-cover"
style="display: inline;">
<div class="avatar-wrap">
<img src="https://img2.baidu.com/it/u=3227930683,3721164732&fm=26&fmt=auto">
</div>
</div>
</a>
<div class="i-content">
<div class="i-inline i-username">AllanXu3000</div>
<div class="i-inline">上海市/普陀区</div>
<div class="i-inline">嘻哈网知名认证博主</div>
<div class="i-inline i-follow">粉丝 <span>27</span> | 关注 <span>10</span></div>
</div>
</div>
<div class="itme fall-ele">
<a href="#" rel="nofollow" target="_blank">
<div class="i-banner">
<img src="https://img1.baidu.com/it/u=3241671413,1544035113&fm=26&fmt=auto" alt="南山养鹿人" class="i-cover" style="display: inline;">
<div class="avatar-wrap">
<img src="https://img.zcool.cn/community/01b04359f6eacaa801216a4b5d3b5f.jpg@520w_390h_1c_1e_2o_100sh.jpg">
</div>
</div>
</a>
<div class="i-content">
<div class="i-inline i-username">南山养鹿人</div>
<div class="i-inline">黑龙江省/齐齐哈尔市</div>
<div class="i-inline">嘻哈网知名认证博主</div>
<div class="i-inline i-follow">粉丝 <span>393</span> | 关注 <span>0</span></div>
</div>
</div>
<div class="itme fall-ele">
<a href="#" rel="nofollow" target="_blank">
<div class="i-banner">
<img src="https://img.zcool.cn/community/031ee7057d21de20000018c1b0a9b33.jpg@520w_390h_1c_1e_2o_100sh.jpg" alt="holy圣洁" class="i-cover" style="display: inline;">
<div class="avatar-wrap">
<img src="http://img.duoziwang.com/uploads/1512/1-1512232222090-L.jpg">
</div>
</div>
</a>
<div class="i-content">
<div class="i-inline i-username">holy圣洁</div>
<div class="i-inline">辽宁省/大连市</div>
<div class="i-inline">嘻哈网知名认证博主</div>
<div class="i-inline i-follow">粉丝 <span>180</span> | 关注 <span>2</span></div>
</div>
</div>
<div class="itme fall-ele">
<a href="#" rel="nofollow" target="_blank">
<div class="i-banner">
<img src="https://img.zcool.cn/community/01a9125a992777a801219586fd4ca0.jpeg@520w_390h_1c_1e_2o_100sh.jpg" alt="大鱼肝油" class="i-cover" style="display: inline;">
<div class="avatar-wrap">
<img src="https://img1.baidu.com/it/u=2080474161,456288425&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
</div>
</div>
</a>
<div class="i-content">
<div class="i-inline i-username">大鱼肝油</div>
<div class="i-inline"></div>
<div class="i-inline">嘻哈网知名认证博主</div>
<div class="i-inline i-follow">粉丝 <span>44</span> | 关注 <span>0</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
热门搜索 – 标签
CSS
/*自动标签*/
.mb-40 {
margin-bottom: 40px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.p-classify-title {
color: #333;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.tag {
padding: 0 10px;
margin: 10px 0;
width: 109px;
height: 20px;
line-height: 20px;
text-align: center;
float: left;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #777;
border-right: 1px solid #bbb;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag:hover {
color: #f5be34;
}
/*高调动效*/
.tag {
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tag:hover {
font-size: 22px;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
@media (min-width: 768px) {
.home-first-screen .images a strong {
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
}
模块HTML
<div class="p-painter clear mt-40 mb-40">
<div class="p-classify-title">
热门搜索 - 嘻哈网
</div>
<div class="p-classify-content dib">
<a target="_blank" href="/tags/115" class="tag">原创</a>
<a target="_blank" href="/tags/161" class="tag">女孩子</a>
<a target="_blank" href="/tags/16495" class="tag">生活</a>
<a target="_blank" href="/tags/114" class="tag">创作</a>
<a target="_blank" href="/tags/1354" class="tag">明日方舟</a>
<a target="_blank" href="/tags/291" class="tag">鬼灭之刃</a>
<a target="_blank" href="/tags/158" class="tag">命运-冠位指定</a>
<a target="_blank" href="/tags/919" class="tag">碧蓝航线</a>
<a target="_blank" href="/tags/236" class="tag">おっぱい</a>
<a target="_blank" href="/tags/157" class="tag">型月世界</a>
<a target="_blank" href="/tags/421" class="tag">同人</a>
<a target="_blank" href="/tags/107" class="tag">东方Project</a>
<a target="_blank" href="/tags/8058" class="tag">脚掌</a>
<a target="_blank" href="/tags/9600" class="tag">黑丝袜</a>
<a target="_blank" href="/tags/1370" class="tag">少女</a>
<a target="_blank" href="/tags/159" class="tag">命运－冠位指定</a>
<a target="_blank" href="/tags/1582" class="tag">胡蝶忍</a>
<a target="_blank" href="/tags/576" class="tag">风景</a>
<a target="_blank" href="/tags/1498" class="tag">《明日方舟Arknights》</a>
<a target="_blank" href="/tags/151" class="tag">VOCALOID</a>
</div>
</div>
<style>
.home-first-part h2,
.home-first-part ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
word-wrap: break-word;
word-break: break-all;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: Optima-Regular, PingFang SC, Microsoft YaHei, WenQuanYi Micro Hei,
Arial, Helvetica, sans-serif;
}
svg.icon {
width: 1em;
height: 1em;
margin-bottom: 1px;
}
.row {
margin: 0 -10px;
box-sizing: border-box;
}
.home-first-screen {
padding: 15px 0 5px;
}
.home-first-screen .images,
.home-first-screen .parts {
margin-bottom: 0;
position: relative;
}
.home-first-screen .dubao {
position: relative;
margin-bottom: 5px;
}
@media (min-width: 768px) {
.home-first-screen .dubao {
margin-bottom: 10px;
}
}
.home-first-screen .row {
margin-left: -5px;
margin-right: -5px;
}
.home-first-screen .col-md-3,
.home-first-screen .col-md-6,
.home-first-screen .col-xs-6 {
padding-left: 5px;
padding-right: 5px;
}
.home-first-screen .thumb {
display: block;
width: 100%;
padding-top: 62.22222222%;
border-radius: 3px;
overflow: hidden;
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.home-first-screen .thumb:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 100%;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
.home-first-screen .thumb.bigOne {
padding-top: 56.72131148%;
}
.home-first-screen .thumb img {
display: none;
}
.home-first-screen .items .thumb {
padding-top: 58.82352941%;
}
.home-first-screen .images .col-md-6,
.home-first-screen .images .col-xs-6 {
margin-bottom: 10px;
}
.home-first-screen .images .item2 {
margin-bottom: 0;
}
.home-first-screen .images a {
display: block;
position: relative;
}
.home-first-screen .images a strong {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.4em 0.8em 0.6em;
font-size: 12px;
color: #dadada;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.3;
background-image: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0.2) 0,
rgba(0, 0, 0, 0.6) 100%
);
background-image: -o-linear-gradient(
top,
rgba(0, 0, 0, 0.2) 0,
rgba(0, 0, 0, 0.6) 100%
);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0,
rgba(0, 0, 0, 0.6) 100%
);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#99000000', GradientType=0);
box-shadow: 0 -7px 15px rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
@media (min-width: 768px) {
.home-first-screen .images a strong {
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
}
.home-first-screen a:hover .thumb:after {
visibility: visible;
opacity: 1;
}
.home-first-screen .dubao {
background: #fff;
padding: 12px 10px 24px;
height: 14px;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.home-first-screen .dubao h3 {
float: left;
font-size: 14px;
color: #4bbbfa;
font-weight: 400;
line-height: 14px;
padding: 0 10px 0 0;
border-right: 1px solid #ddd;
}
.home-first-screen .dubao h3 a {
color: #4bbbfa;
}
.home-first-screen .dubao h3 a:hover {
color: #fff;
}
/*3*/
.home-first-screen .dubao .cont {
height: 14px;
overflow: hidden;
position: relative;
}
.home-first-screen .dubao .cont a {
display: block;
line-height: 14px;
color: #606060;
font-size: 12px;
transition: all 0.5s;
position: absolute;
left: 0;
top: 0;
}
.home-first-screen .dubao .cont a:hover {
color: #000;
}
.home-first-screen .dubao .cont a span {
display: inline-block;
padding: 0 15px;
white-space: nowrap;
}
.home-first-screen .parts .hf-title {
font-size: 12px;
padding: 10px 0 20px;
margin-bottom: 0;
height: 16px;
overflow: hidden;
position: relative;
}
.home-first-screen .parts .hf-title strong {
color: #525252;
margin-right: 5px;
font-size: 16px;
margin-left: 10px;
}
.home-first-screen .parts .hf-title strong:before {
content: "";
display: inline-block;
width: 3px;
height: 16px;
vertical-align: middle;
background: #f580af;
margin-right: 6px;
margin-top: -2px;
}
.home-first-screen .parts .hf-title strong a {
font-weight: 400;
color: #f580af;
}
.home-first-screen .parts .hf-title strong a:hover {
color: #4bbbfa;
}
.home-first-screen .parts .hf-title span {
font-weight: 400;
color: #d5d5d5;
}
.home-first-screen .parts .hf-title .more {
display: block;
position: absolute;
right: 10px;
top: 10px;
font-size: 10px;
text-transform: uppercase;
padding: 0 5px 0;
border-radius: 3px;
border: 1px solid #b1afaf;
color: #b1afaf;
}
.home-first-screen .parts .hf-title .more:hover {
color: #fff;
background: #4bbbfa;
border-color: #4bbbfa;
}
.home-first-screen .parts .home-first-part {
background: #fff;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.home-first-screen .parts .items {
padding: 13px 10px 22px;
}
.home-first-screen .parts .items .col-md-6 {
margin-bottom: 7px;
}
.home-first-screen .parts .items a {
display: block;
}
.home-first-screen .parts .items .thumb {
margin-bottom: 13px;
}
.home-first-screen .parts .items strong {
color: #606060;
}
.home-first-screen .parts .items strong.title {
display: block;
line-height: 1.2em;
font-size: 0.8em;
height: 1.4em;
overflow: hidden;
text-align: center;
font-weight: 400;
}
.home-first-screen .parts .items a:hover strong {
color: #4bbbfa;
}
.home-first-screen .fanye {
position: absolute;
right: 15px;
top: 14px;
background: #fff;
}
.home-first-screen .fanye .btn {
display: inline-block;
border: 1px solid #efefef;
vertical-align: middle;
cursor: pointer;
padding-top: 3px;
margin-right: -1px;
}
.home-first-screen .fanye .btn i {
vertical-align: text-bottom;
}
.home-first-screen .fanye .btn:hover {
border-color: #4bbbfa;
background: #4bbbfa;
color: #fff;
}
.home-first-screen .fanye .btn.no,
.home-first-screen .fanye .btn.no:hover {
cursor: default;
background: #fff;
color: #eee;
border-color: #efefef;
}
.home-first-screen .fanye .pages {
font-size: 14px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-top: 4px;
}
.home-first-screen .fanye .pages em {
color: #525252;
font-style: normal;
}
.home-first-screen .home-course .hf-title {
padding-bottom: 30px;
border-bottom: 1px solid #ddd;
position: relative;
}
.home-first-screen .home-course .courses {
margin: 7px 0 10px;
position: relative;
height: 106px;
overflow: hidden;
}
.home-first-screen .home-course .course-items {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.home-first-screen .home-course ul {
margin: 0 10px 0 12px;
list-style: none;
}
.home-first-screen .home-course li {
list-style-type: disc;
list-style-position: inside;
line-height: 20px;
height: 20px;
overflow: hidden;
position: relative;
color: #606060;
font-size: 14px;
margin: 6px 0;
}
.home-first-screen .home-course li a {
color: #606060;
}
.home-first-screen .home-course li a:hover {
color: #4bbbfa;
}
/*4*/
.home-first-screen .home-course li strong {
font-weight: 400;
}
.home-first-screen .home-course li span {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
display: inline-block;
padding: 0 10px;
line-height: 20px;
background: #f580af;
border-radius: 3px;
color: #ffffff;
}
.home-first-screen .home-menus ul {
margin: 0;
list-style: none;
overflow: hidden;
}
.home-first-screen .home-menus li {
float: left;
width: 33.33333333%;
text-align: center;
}
.home-first-screen .home-menus a {
display: block;
text-align: center;
font-size: 14px;
color: #606060;
position: relative;
line-height: 1.5;
padding: 10px 5px;
box-sizing: border-box;
height: 83px;
transition: all 0.1s;
}
.home-first-screen .home-menus a:hover {
background: #4bbbfa;
color: #fff;
}
.home-first-screen .home-menus a:hover i {
color: #fff;
}
.home-first-screen .home-menus a:hover:after,
.home-first-screen .home-menus a:hover:before {
display: none;
visibility: hidden;
}
.home-first-screen .home-menus a svg {
font-size: 22px;
line-height: 1.9;
}
@media (min-width: 768px) {
.home-first-screen .home-menus a svg {
font-size: 28px;
line-height: 1.3;
}
}
.home-first-screen .home-menus a span {
display: block;
line-height: 2;
}
.home-first-screen .home-menus li:nth-child(1) a:before,
.home-first-screen .home-menus li:nth-child(2) a:before,
.home-first-screen .home-menus li:nth-child(4) a:before,
.home-first-screen .home-menus li:nth-child(5) a:before {
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 85%;
border-right: 1px solid #ddd;
}
.home-first-screen .home-menus li:nth-child(4) a:before,
.home-first-screen .home-menus li:nth-child(5) a:before {
bottom: auto;
top: 0;
}
.home-first-screen .home-menus li:nth-child(1) a:after,
.home-first-screen .home-menus li:nth-child(2) a:after,
.home-first-screen .home-menus li:nth-child(3) a:after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 85%;
border-bottom: 1px solid #ddd;
}
.home-first-screen .home-menus li:nth-child(2) a:after {
width: 100%;
}
.home-first-screen .home-menus li:nth-child(3) a:after {
right: auto;
left: 0;
}
@media (min-width: 768px) {
.home-first-screen .parts .home-first-part {
height: 168px;
}
.home-first-screen .parts .items a {
height: 130px;
overflow: hidden;
}
.home-first-screen .parts .items a strong {
font-size: 14px;
padding-top: 3px;
}
.home-first-screen .dubao {
padding: 11px 20px 24px 28px;
}
.home-first-screen .dubao h3 {
padding: 0 24px 0 0;
margin-right: 10px;
}
.home-first-screen .dubao .cont span {
border-right: 1px solid #ddd;
}
.home-first-screen .dubao .cont span:last-child {
border-right: none;
}
}
@media (min-width: 992px) {
.home-first-screen {
padding: 0 0 10px;
}
.home-first-screen .parts .col-md-3 {
width: 23.72881356%;
}
.home-first-screen .parts .col-md-3.part-first {
width: 28.81355932%;
}
.home-first-screen .images .item1 {
width: 52.54237288%;
}
.home-first-screen .images .item2 {
width: 47.45762711%;
}
}
@media screen and (max-width: 768px) {
.menu-top {
margin-left: 0;
}
.zrz-menu-in .sub-menu li {
width: unset;
float: unset;
}
.zrz-menu-in .sub-menu li a {
padding: 10px;
}
.zrz-menu-in .sub-menu li a:hover {
background-color: #cccccc;
color: #000;
}
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position:relative;
min-height:1px;
padding-right:15px;
padding-left:15px
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float:left
}
.col-xs-12 {
width:100%
}
.col-xs-11 {
width:91.66666667%
}
.col-xs-10 {
width:83.33333333%
}
.col-xs-9 {
width:75%
}
.col-xs-8 {
width:66.66666667%
}
.col-xs-7 {
width:58.33333333%
}
.col-xs-6 {
width:50%
}
.col-xs-5 {
width:41.66666667%
}
.col-xs-4 {
width:33.33333333%
}
.col-xs-3 {
width:25%
}
.col-xs-2 {
width:16.66666667%
}
.col-xs-1 {
width:8.33333333%
}
.col-xs-pull-12 {
right:100%
}
.col-xs-pull-11 {
right:91.66666667%
}
.col-xs-pull-10 {
right:83.33333333%
}
.col-xs-pull-9 {
right:75%
}
.col-xs-pull-8 {
right:66.66666667%
}
.col-xs-pull-7 {
right:58.33333333%
}
.col-xs-pull-6 {
right:50%
}
.col-xs-pull-5 {
right:41.66666667%
}
.col-xs-pull-4 {
right:33.33333333%
}
.col-xs-pull-3 {
right:25%
}
.col-xs-pull-2 {
right:16.66666667%
}
.col-xs-pull-1 {
right:8.33333333%
}
.col-xs-pull-0 {
right:auto
}
.col-xs-push-12 {
left:100%
}
.col-xs-push-11 {
left:91.66666667%
}
.col-xs-push-10 {
left:83.33333333%
}
.col-xs-push-9 {
left:75%
}
.col-xs-push-8 {
left:66.66666667%
}
.col-xs-push-7 {
left:58.33333333%
}
.col-xs-push-6 {
left:50%
}
.col-xs-push-5 {
left:41.66666667%
}
.col-xs-push-4 {
left:33.33333333%
}
.col-xs-push-3 {
left:25%
}
.col-xs-push-2 {
left:16.66666667%
}
.col-xs-push-1 {
left:8.33333333%
}
.col-xs-push-0 {
left:auto
}
.col-xs-offset-12 {
margin-left:100%
}
.col-xs-offset-11 {
margin-left:91.66666667%
}
.col-xs-offset-10 {
margin-left:83.33333333%
}
.col-xs-offset-9 {
margin-left:75%
}
.col-xs-offset-8 {
margin-left:66.66666667%
}
.col-xs-offset-7 {
margin-left:58.33333333%
}
.col-xs-offset-6 {
margin-left:50%
}
.col-xs-offset-5 {
margin-left:41.66666667%
}
.col-xs-offset-4 {
margin-left:33.33333333%
}
.col-xs-offset-3 {
margin-left:25%
}
.col-xs-offset-2 {
margin-left:16.66666667%
}
.col-xs-offset-1 {
margin-left:8.33333333%
}
.col-xs-offset-0 {
margin-left:0
}
@media (min-width:768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float:left
}
.col-sm-12 {
width:100%
}
.col-sm-11 {
width:91.66666667%
}
.col-sm-10 {
width:83.33333333%
}
.col-sm-9 {
width:75%
}
.col-sm-8 {
width:66.66666667%
}
.col-sm-7 {
width:58.33333333%
}
.col-sm-6 {
width:50%
}
.col-sm-5 {
width:41.66666667%
}
.col-sm-4 {
width:33.33333333%
}
.col-sm-3 {
width:25%
}
.col-sm-2 {
width:16.66666667%
}
.col-sm-1 {
width:8.33333333%
}
.col-sm-pull-12 {
right:100%
}
.col-sm-pull-11 {
right:91.66666667%
}
.col-sm-pull-10 {
right:83.33333333%
}
.col-sm-pull-9 {
right:75%
}
.col-sm-pull-8 {
right:66.66666667%
}
.col-sm-pull-7 {
right:58.33333333%
}
.col-sm-pull-6 {
right:50%
}
.col-sm-pull-5 {
right:41.66666667%
}
.col-sm-pull-4 {
right:33.33333333%
}
.col-sm-pull-3 {
right:25%
}
.col-sm-pull-2 {
right:16.66666667%
}
.col-sm-pull-1 {
right:8.33333333%
}
.col-sm-pull-0 {
right:auto
}
.col-sm-push-12 {
left:100%
}
.col-sm-push-11 {
left:91.66666667%
}
.col-sm-push-10 {
left:83.33333333%
}
.col-sm-push-9 {
left:75%
}
.col-sm-push-8 {
left:66.66666667%
}
.col-sm-push-7 {
left:58.33333333%
}
.col-sm-push-6 {
left:50%
}
.col-sm-push-5 {
left:41.66666667%
}
.col-sm-push-4 {
left:33.33333333%
}
.col-sm-push-3 {
left:25%
}
.col-sm-push-2 {
left:16.66666667%
}
.col-sm-push-1 {
left:8.33333333%
}
.col-sm-push-0 {
left:auto
}
.col-sm-offset-12 {
margin-left:100%
}
.col-sm-offset-11 {
margin-left:91.66666667%
}
.col-sm-offset-10 {
margin-left:83.33333333%
}
.col-sm-offset-9 {
margin-left:75%
}
.col-sm-offset-8 {
margin-left:66.66666667%
}
.col-sm-offset-7 {
margin-left:58.33333333%
}
.col-sm-offset-6 {
margin-left:50%
}
.col-sm-offset-5 {
margin-left:41.66666667%
}
.col-sm-offset-4 {
margin-left:33.33333333%
}
.col-sm-offset-3 {
margin-left:25%
}
.col-sm-offset-2 {
margin-left:16.66666667%
}
.col-sm-offset-1 {
margin-left:8.33333333%
}
.col-sm-offset-0 {
margin-left:0
}
}
@media (min-width:992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float:left
}
.col-md-12 {
width:100%
}
.col-md-11 {
width:91.66666667%
}
.col-md-10 {
width:83.33333333%
}
.col-md-9 {
width:75%
}
.col-md-8 {
width:66.66666667%
}
.col-md-7 {
width:58.33333333%
}
.col-md-6 {
width:50%
}
.col-md-5 {
width:41.66666667%
}
.col-md-4 {
width:33.33333333%
}
.col-md-3 {
width:25%
}
.col-md-2 {
width:16.66666667%
}
.col-md-1 {
width:8.33333333%
}
.col-md-pull-12 {
right:100%
}
.col-md-pull-11 {
right:91.66666667%
}
.col-md-pull-10 {
right:83.33333333%
}
.col-md-pull-9 {
right:75%
}
.col-md-pull-8 {
right:66.66666667%
}
.col-md-pull-7 {
right:58.33333333%
}
.col-md-pull-6 {
right:50%
}
.col-md-pull-5 {
right:41.66666667%
}
.col-md-pull-4 {
right:33.33333333%
}
.col-md-pull-3 {
right:25%
}
.col-md-pull-2 {
right:16.66666667%
}
.col-md-pull-1 {
right:8.33333333%
}
.col-md-pull-0 {
right:auto
}
.col-md-push-12 {
left:100%
}
.col-md-push-11 {
left:91.66666667%
}
.col-md-push-10 {
left:83.33333333%
}
.col-md-push-9 {
left:75%
}
.col-md-push-8 {
left:66.66666667%
}
.col-md-push-7 {
left:58.33333333%
}
.col-md-push-6 {
left:50%
}
.col-md-push-5 {
left:41.66666667%
}
.col-md-push-4 {
left:33.33333333%
}
.col-md-push-3 {
left:25%
}
.col-md-push-2 {
left:16.66666667%
}
.col-md-push-1 {
left:8.33333333%
}
.col-md-push-0 {
left:auto
}
.col-md-offset-12 {
margin-left:100%
}
.col-md-offset-11 {
margin-left:91.66666667%
}
.col-md-offset-10 {
margin-left:83.33333333%
}
.col-md-offset-9 {
margin-left:75%
}
.col-md-offset-8 {
margin-left:66.66666667%
}
.col-md-offset-7 {
margin-left:58.33333333%
}
.col-md-offset-6 {
margin-left:50%
}
.col-md-offset-5 {
margin-left:41.66666667%
}
.col-md-offset-4 {
margin-left:33.33333333%
}
.col-md-offset-3 {
margin-left:25%
}
.col-md-offset-2 {
margin-left:16.66666667%
}
.col-md-offset-1 {
margin-left:8.33333333%
}
.col-md-offset-0 {
margin-left:0
}
}
@media (min-width:1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float:left
}
.col-lg-12 {
width:100%
}
.col-lg-11 {
width:91.66666667%
}
.col-lg-10 {
width:83.33333333%
}
.col-lg-9 {
width:75%
}
.col-lg-8 {
width:66.66666667%
}
.col-lg-7 {
width:58.33333333%
}
.col-lg-6 {
width:50%
}
.col-lg-5 {
width:41.66666667%
}
.col-lg-4 {
width:33.33333333%
}
.col-lg-3 {
width:25%
}
.col-lg-2 {
width:16.66666667%
}
.col-lg-1 {
width:8.33333333%
}
.col-lg-pull-12 {
right:100%
}
.col-lg-pull-11 {
right:91.66666667%
}
.col-lg-pull-10 {
right:83.33333333%
}
.col-lg-pull-9 {
right:75%
}
.col-lg-pull-8 {
right:66.66666667%
}
.col-lg-pull-7 {
right:58.33333333%
}
.col-lg-pull-6 {
right:50%
}
.col-lg-pull-5 {
right:41.66666667%
}
.col-lg-pull-4 {
right:33.33333333%
}
.col-lg-pull-3 {
right:25%
}
.col-lg-pull-2 {
right:16.66666667%
}
.col-lg-pull-1 {
right:8.33333333%
}
.col-lg-pull-0 {
right:auto
}
.col-lg-push-12 {
left:100%
}
.col-lg-push-11 {
left:91.66666667%
}
.col-lg-push-10 {
left:83.33333333%
}
.col-lg-push-9 {
left:75%
}
.col-lg-push-8 {
left:66.66666667%
}
.col-lg-push-7 {
left:58.33333333%
}
.col-lg-push-6 {
left:50%
}
.col-lg-push-5 {
left:41.66666667%
}
.col-lg-push-4 {
left:33.33333333%
}
.col-lg-push-3 {
left:25%
}
.col-lg-push-2 {
left:16.66666667%
}
.col-lg-push-1 {
left:8.33333333%
}
.col-lg-push-0 {
left:auto
}
.col-lg-offset-12 {
margin-left:100%
}
.col-lg-offset-11 {
margin-left:91.66666667%
}
.col-lg-offset-10 {
margin-left:83.33333333%
}
.col-lg-offset-9 {
margin-left:75%
}
.col-lg-offset-8 {
margin-left:66.66666667%
}
.col-lg-offset-7 {
margin-left:58.33333333%
}
.col-lg-offset-6 {
margin-left:50%
}
.col-lg-offset-5 {
margin-left:41.66666667%
}
.col-lg-offset-4 {
margin-left:33.33333333%
}
.col-lg-offset-3 {
margin-left:25%
}
.col-lg-offset-2 {
margin-left:16.66666667%
}
.col-lg-offset-1 {
margin-left:8.33333333%
}
.col-lg-offset-0 {
margin-left:0
}
}
</style>
模块HTML
<div class="home-first-screen">
<div class="parts row">
<div class="col-sm-6 col-md-3 part-first">
<div class="home-first-part home-menus">
<ul>
<li>
<a href="https://zaodaoji.com/ribao">
<svg class="icon icon-back" aria-hidden="true">;
<use xlink:href="#icon-ribao"></use>
</svg><span>稻叽日报</span>
</a>
</li>
<li>
<a href="https://zaodaoji.com/erciyuanmeitu">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
</svg><span>二次元图</span>
</a>
</li>
<li>
<a href="https://zaodaoji.com/games">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-youxi"></use>
</svg><span>游戏库</span>
</a>
</li>
<li>
<a href="https://zaodaoji.com/cosplay">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-COShuaji"></use>
</svg><span>COSPLAY</span>
</a>
</li>
<li>
<a href="https://zaodaoji.com/cartoon">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-manhua"></use>
</svg><span>漫画</span>
</a>
</li>
<li>
<a href="https://zaodaoji.com/newworldgate">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianshi"></use>
</svg><span>新世界大门</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-topics">
<h2 class="hf-title"><strong><a>专题目录</a></strong><a class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6"><a href="https://zaodaoji.com/topics/mstation"><span class="thumb" style="background-image:url(https://zaodaoji.com/wp-content/uploads/2021/05/43ca273aa2f0-1024x576.png)"><img src="https://zaodaoji.com/wp-content/uploads/2021/05/43ca273aa2f0-1024x576.png" alt="thumb"></span><strong class="title">D站免费分享</strong></a>
</div>
<div class="col-xs-6"><a href="https://zaodaoji.com/topics/members"><span class="thumb" style="background-image:url(https://zaodaoji.com/wp-content/uploads/2021/05/007cbc94b489-1024x576.png)"><img src="https://zaodaoji.com/wp-content/uploads/2021/05/007cbc94b489-1024x576.png" alt="thumb"></span><strong class="title">D站会员专享</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-subjects">
<h2 class="hf-title"><strong><a>论坛交流</a></strong><a class="more">more</a></h2>
<div class="items">
<div class="row">
<div class="col-xs-6"><a href="https://zaodaoji.com/daojishequ/maopao"><span class="thumb" style="background-image:url(https://zaodaoji.com/wp-content/uploads/2021/07/a925c52ce855-1024x576.png)"><img src="https://zaodaoji.com/wp-content/uploads/2021/07/a925c52ce855-1024x576.png" alt="thumb"></span><strong class="title">每日冒泡</strong></a>
</div>
<div class="col-xs-6"><a href="https://zaodaoji.com/daojishequ/ziyuan"><span class="thumb" style="background-image:url(https://zaodaoji.com/wp-content/uploads/2021/07/5f7419440884-1024x576.png)"><img src="https://zaodaoji.com/wp-content/uploads/2021/07/5f7419440884-1024x576.png" alt="thumb"></span><strong class="title">资源补档</strong></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="home-first-part home-course">
<h2 class="hf-title"><strong><a href="https://zaodaoji.com/announcements">网站公告</a></strong><a href="https://zaodaoji.com/announcements" class="more">more</a></h2>
<div class="courses">
<div class="course-items">
<ul>
<li><a href="https://zaodaoji.com/63.html"><strong>官方公众号</strong><span>绅士聚集地</span></a>
</li>
<li><a href="https://zaodaoji.com/daojishequ"><strong>稻叽社区</strong><span>早稻叽官方</span></a>
</li>
<li><a href="https://zaodaoji.com/帮助中心"><strong>帮助中心</strong><span>新股东推荐</span></a>
</li>
<li><a target="_blank" href="https://afdian.net/@zaodaoji?tab=home"><strong>官方爱发电</strong><span>赞助</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
招聘区块
css
.top-ad-list {
display: flex;
margin-top: 20px;
width: 1180px;
overflow: hidden;
}
.top-ad-list .item {
margin-right: 20px;
width: 220px;
float: left;
}
.top-ad-list .item:last-child {
margin-right: 0;
}
.top-ad-list .item a {
display: block;
}
.top-ad-list .item img {
width: 100%;
border-radius: 4px;
transform: scale(1);
transition: transform 1.5s cubic-bezier(0,1,.75,1);
}
.top-ad-list .item img:hover {
transform: scale(1.03);
transition: transform 1.5s cubic-bezier(0,1,.75,1);
}
.index-section {
margin-top: 20px;
}
.index-section .title-wrap {
position: relative;
margin-bottom: 15px;
width: 1180px;
}
.index-section .title-wrap h2.section-title {
display: inline-block;
font-size: 24px;
}
.index-section .title-wrap h2.section-title span {
margin-left: 12px;
color: #999;
}
.index-section .title-wrap a.more-link {
position: absolute;
line-height: 36px;
right: 0;
font-size: 14px;
color: #333;
font-weight: bold;
}
.index-section .title-wrap a.more-link:hover {
color: #16aa3a;
}
.index-section .content-wrap .swiper-button-prev {
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E");
}
.index-section .content-wrap .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23999999'%2F><%2Fsvg>");
}
.index-section .content-wrap .swiper-button-prev:hover {
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}
.index-section .content-wrap .swiper-button-next:hover {
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23666666'%2F><%2Fsvg>");
}
.index-section .content-wrap .swiper-container .page-btn {
opacity: 1;
transform: scale(1);
width: 20px;
height: 30px;
background-size: 18px 30px;
}
.index-section .content-wrap .swiper-container .page-btn.swiper-button-disabled {
opacity: 0;
}
.index-section .content-wrap .swiper-button-prev {
left: 90px;
}
.index-section .content-wrap .swiper-button-next {
right: 90px;
}
.index-designer-wrap {
display: flex;
width: 100%;
overflow: hidden;
}
.index-designer-wrap .i-item {
position: relative;
display: block;
float: left;
margin: 0 20px 20px 0;
width: 280px;
overflow: hidden;
}
.index-designer-wrap .i-item:nth-child(4n) {
margin-right: 0;
}
.index-designer-wrap[data-cols="4"] .i-item {
position: relative;
display: block;
margin: 0 2% 2% 0;
width: 23.5%;
}
.index-designer-wrap[data-cols="4"] .i-item:nth-child(4n) {
margin-right: 0;
}
.index-designer-wrap .i-item .img-box {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 150%;
border: 1px solid #eee;
overflow: hidden;
}
.index-designer-wrap .i-item .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.index-designer-wrap .i-item .content-box {
position: absolute;
padding: 16px 5px 14px 5px;
bottom: 0;
width: 100%;
background: #000;
color: #fff;
font-size: 16px;
text-align: center;
transition: all 0.3s ease-in-out;
transform: translateY(100%);
opacity: 0;
}
.index-designer-wrap .i-item .content-box h3 {
font-size: 24px;
margin: 0 0 5px 0;
}
.index-designer-wrap .i-item:hover .content-box {
transform: translateY(0);
opacity: 1;
}
.topic-ad-list { }
.topic-ad-list .tp_name a { display: block; font-size: 16px; color: #333; line-height: 2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.topic-ad-list li { float: left; width: 380px; margin: 0 20px 20px 0px; background: #fff; border-bottom: 1px solid #eee; }
.topic-ad-list li:nth-of-type(3n) { margin-right: 0; }
.topic-ad-list li:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px; }
.right_view { float: right; top: 0; padding: 0 10px 0 0; }
.topic-ad-list .i-content { padding: 16px; color: #999; }
.topic-ad-list .i-content p { line-height: 1.8; }
.topic-ad-list a.img-box { display: inline-block; width: 380px; height: 205px; background: #eee; }
.topic-ad-list a.img-box img { width: 100%; height: 100%; }
.index-job-box {
background: #fff;
}
.index-job-box .left-box {
display: block;
float: left;
width: 310px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.index-job-box .right-box {
width: 870px;
float: right;
}
.index-job-box .left-box img {
width: 300px;
transform: scale(1);
transition: transform 1.5s cubic-bezier(0,1,.75,1);
}
.index-job-box .left-box:hover img {
transform: scale(1.03);
transition: transform 1.5s cubic-bezier(0, 1, .75, 1);
}
.index-creator-list {
}
.index-creator-list .itme {
position: relative;
float: left;
width: 280px;
text-align: center;
font-size: 12px;
line-height: 22px;
color: #999;
background-color: rgb(255, 255, 255);
margin: 0 20px 20px 0px;
}
.index-creator-list .itme:nth-child(4n) {
margin-right: 0;
}
.index-creator-list .itme:hover {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
}
.index-creator-list .i-banner {
position: relative;
height: 120px;
background: #ccc;
}
.index-creator-list .i-banner .i-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.index-creator-list .i-banner .avatar-wrap {
position: absolute;
left: 50%;
bottom: 0;
margin: -42px;
}
.index-creator-list .avatar-wrap img {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
}
.index-creator-list .itme .i-content {
padding: 54px 8px 8px 8px;
}
.index-creator-list .itme .i-inline {
height: 28px;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
}
.index-creator-list .itme .i-username {
color: #333;
font-size: 16px;
font-weight: bold;
}
.index-creator-list .itme .i-follow {
margin-top: 10px;
}
.index-creator-list .itme .i-follow span {
color: #333;
font-weight: bold;
}
.index-f-wrap {
margin-bottom: 20px;
overflow: hidden;
}
.index-f-wrap .i-itme-wrap {
width: 380px;
float: left;
margin-right: 20px;
}
.index-f-wrap .i-itme-wrap .i-cover {
display: block;
width: 380px;
min-height: 280px;
background: #fff;
overflow: hidden;
}
.index-f-wrap .i-itme-wrap.i-last {
margin-right: 0;
}
.index-f-wrap .i-itme-wrap img {
width: 100%;
transform: scale(1);
transition: transform 1.5s cubic-bezier(0,1,.75,1);
}
.index-f-wrap .i-itme-wrap .i-cover:hover img {
transform: scale(1.03);
transition: transform 1.5s cubic-bezier(0,1,.75,1);
}
.index-f-wrap .i-itme-wrap .i-btns {
height: 85px;
padding: 18px 8px 0 8px;
background: #fff;
overflow: hidden;
}
.index-f-wrap .i-itme-wrap .i-btns .i-btn {
margin: 0 8px 18px 0;
float: left;
padding: 3px 8px;
color: #333;
background: #f1f1f1;
border-radius: 2px;
}
.top-supplier-title {
position: relative;
margin-bottom: 30px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
}
.top-supplier-title span {
position: absolute;
padding: 0 5px 0 0;
top: 15px;
background: #f1f1f1;
color: #444;
font-size: 18px;
display: inline-block;
}
.top-supplier-list {
display: flex;
}
.top-supplier-list:after {
display: block;
content: "";
clear: both;
}
.top-supplier-list .item {
width: 220px;
float: left;
margin-right: 20px;
margin-bottom: 12px;
}
.top-supplier-list .item:nth-child(5n) {
margin-right: 0;
}
.top-supplier-list a {
display: block;
}
.top-supplier-list a:hover {
color: #444;
}
.top-supplier-list .i-box {
position: relative;
font-size: 0;
}
.top-supplier-list .i-box:hover:after {
position: absolute;
left: 0;
top: 0;
content: "";
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 1;
}
.top-supplier-list a img {
max-width: 100%;
}
.top-supplier-list a p {
padding: 2px 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}招聘html
<div class="index-section">
<div class="title-wrap">
<h2 class="section-title">服装人才招聘<span>FASHION JOBS</span></h2>
<a href="//job.eeff.net" class="more-link" target="_blank">更多</a>
</div>
<div class="content-wrap">
<!--1637 原调用招聘版块帖子，现更改为招聘插件数据 -->
<div class="index-job-box cl wp">
<a class="left-box" href="//job.eeff.net" target="_blank"><img data-original="http://pic.eeff.net/data/attachment/portal/201904/09/job.jpg" src="http://pic.eeff.net/data/attachment/portal/201904/09/job.jpg" alt="服装人才招聘" style="display: inline;"></a>
<div class="right-box">
<table class="homejob" cellspacing="0" cellpadding="0">
<tbody><tr>
<th>公司名称</th>
<th>职位名称</th>
<th>工资</th>
<th>工作地区</th>
<th width="80">更新时间</th>
</tr>
<tr data-id="">
<td><a target="_blank" href="//job.eeff.net/company/c_show-id_190196.html" rel="nofollow">江苏华艺时装集团股份有限公司</a></td>
<td><a target="_blank" href="//job.eeff.net/job/12125.html" rel="nofollow">ODM设计师</a></td>
<td>8000-15000元</td>
<td>江苏 南通</td>
<td>2022-02-08</td>
</tr>
<tr data-id="">
<td><a target="_blank" href="//job.eeff.net/company/c_show-id_190581.html" rel="nofollow">厦门市人行道科技服务有限公司</a></td>
<td><a target="_blank" href="//job.eeff.net/job/12126.html" rel="nofollow">电商经理</a></td>
<td>15000-20000元</td>
<td>福建 厦门</td>
<td>2022-02-08</td>
</tr>
<tr data-id="">
<td><a target="_blank" href="//job.eeff.net/company/c_show-id_46802.html" rel="nofollow">晋江爱涞服装有限公司</a></td>
<td><a target="_blank" href="//job.eeff.net/job/12023.html" rel="nofollow">跨境电商B2C运营</a></td>
<td>面议</td>
<td>福建 泉州</td>
<td>2022-02-03</td>
</tr>
<tr data-id="">
<td><a target="_blank" href="//job.eeff.net/company/c_show-id_189690.html" rel="nofollow">台州翌凡希服饰有限公司</a></td>
<td><a target="_blank" href="//job.eeff.net/job/12121.html" rel="nofollow">童装设计师</a></td>
<td>面议</td>
<td>浙江 台州</td>
<td>2022-01-28</td>
</tr>
<tr data-id="">
<td><a target="_blank" href="//job.eeff.net/company/c_show-id_189038.html" rel="nofollow">广州市妤希特服饰</a></td>
<td><a target="_blank" href="//job.eeff.net/job/12119.html" rel="nofollow">服装设计助理</a></td>
<td>面议</td>
<td>广东 广州</td>
<td>2022-01-20</td>
</tr>
<tr data-id="">
</tbody></table>
</div>
</div>
</div>
</div>人物/用户HTML
<div class="index-section">
<div class="title-wrap">
<h2 class="section-title">设计师<span>Designers</span></h2>
<a href="/designers-0-0-0-0-0.html" class="more-link" target="_blank" title="点击查看更多服装设计师">更多</a>
</div>
<div class="content-wrap wp">
<div class="index-designer-wrap">
<a href="/designer-278.html" class="i-item">
<div class="img-box">
<img class="bg" src="http://pic.eeff.net/data/attachment/design/202110/15/232886_172743s00nn04tne.jpg!/both/400x600" alt="Vmajor">
</div>
<div class="content-box">
<h3>朱威特</h3>
<div>Vmajor</div>
</div>
</a>
<a href="/designer-77.html" class="i-item">
<div class="img-box">
<img class="bg" src="http://pic.eeff.net/data/attachment/design/201902/18/657260_165734ejkhn0tvvi.jpg!/both/400x600" alt="THEO VII(UK)">
</div>
<div class="content-box">
<h3>何苗</h3>
<div>THEO VII(UK)</div>
</div>
</a>
<a href="/designer-279.html" class="i-item">
<div class="img-box">
<img class="bg" src="http://pic.eeff.net/data/attachment/design/202110/21/232886_185505egi7ii1c4j.png!/both/400x600" alt="焦糖.眼睛/CARAMEL.EYES">
</div>
<div class="content-box">
<h3>聂婷</h3>
<div>焦糖.眼睛/CARAMEL.EYES</div>
</div>
</a>
<a href="/designer-288.html" class="i-item">
<div class="img-box">
<img class="bg" src="http://pic.eeff.net/data/attachment/design/202111/05/232886_165307p54bd443hb.jpg!/both/400x600" alt="SELAH 希拉">
</div>
<div class="content-box">
<h3>杨宇</h3>
<div>SELAH 希拉</div>
</div>
</a>
</div>
</div>
</div>来源于互联网，侵权请联系邮箱3484479098@qq.com删除
