WordPress首页六格菜单PC版

效果演示

Html代码

可直接添加到后台 小工具 >> 自定义HTML代码，里面的图片链接自行替换。

<div class="home-row-left content-area ">
  <div id="html-box-lg" class="html-box">
    <div class="sort mobile-hidden">
      <!-- 专题 -->
      <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>
            </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="#">
                <img class="sort-config-icon" src="/images/10019.png" alt="">
                <p class="sort-config-title">文章资讯</p><span class="sort-config-desc">查看前沿资讯</span>
              </a>
            </li>
            <li>
              <a class="sort-config-item" href="#">
                <img class="sort-config-icon" src="/images/100255.png" alt="">
                <p class="sort-config-title">资源中心
                </p><span class="sort-config-desc">下载最新资源</span>
              </a>
            </li>
            <li>
              <a class="sort-config-item" href="#">
                <img class="sort-config-icon" src="/images/10027.png" alt="">
                <p class="sort-config-title">官方商城</p><span class="sort-config-desc">咕噜优选商城</span>
              </a>
            </li>
            <li>
              <a class="sort-config-item" href="#">
                <img class="sort-config-icon" src="/images/VIP.png" alt="">
                <p class="sort-config-title">开通会员</p><span class="sort-config-desc">畅享所有服务</span>
              </a>
            </li>
            <li>
              <a class="sort-config-item" href="#">
                <img class="sort-config-icon" src="/images/10025.png" alt="">
                <p class="sort-config-title">官方认证</p><span class="sort-config-desc">认证赚取佣金</span>
              </a>
            </li>
            <li>
              <a class="sort-config-item" href="#">
                <img class="sort-config-icon" src="/images/10020.png" alt="">
                <p class="sort-config-title">网络服务</p><span class="sort-config-desc">专业网络服务</span>
              </a>
            </li>
          </ul>
        </div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
      </div>
    </div>
  </div>
</div>

Css代码

!

也想出现在这里？ 联系我们吧