B2区块更新(子主题/会员专享)

PS;

平时子主题没重大改版情况下,日常区块调用将更新在这篇文章。

以 为方便老哥根据自己按需自由DIY进行调用

B2区块使用方法;

B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区
VIP开通会员区块

使用方法 – 使用以下代码替换原来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 &gt; 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放入模块代码中

B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区
包图导航区块
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>

用户模块 –

B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区
首页用户模块
/*用户区块*/
.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>
B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区

用户区块

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>&nbsp;&nbsp;|&nbsp;&nbsp;关注 <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>&nbsp;&nbsp;|&nbsp;&nbsp;关注 <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>&nbsp;&nbsp;|&nbsp;&nbsp;关注 <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>&nbsp;&nbsp;|&nbsp;&nbsp;关注 <span>0</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区

热门搜索 – 标签

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>
B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区
四格多功能导航
<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>
B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区
B2区块更新(子主题/会员专享)-大咖潮 - 全网精选服装潮流穿搭推荐社区

招聘区块

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>

给TA打赏
共{{data.count}}人
人已打赏
用户投稿

余额宝提现要手续费吗(带你了解余额宝)

2022-3-23 9:59:39

用户投稿

出来冒泡的幽默风趣句子(幽默好玩的句子)

2022-3-24 9:24:00

⚠️
版权声明:图酷网所提供的文章、教程等内容均为用户发布整理而来,仅供学习参考,。
若您的权利被侵害,请联系站长 QQ: 57143067 或 点击右侧 私信:图酷V 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧