尚品汇设计稿案例

目录​​​​​​​

一、顶部导航条

顶部导航条图片    

html

css

二、头部

头部图片

​编辑html

css

三、主导航图片​编辑

html

css

四、主要内容区

图片

html

css

五、秒杀

图片

html

css

六、楼层

图片

html

css

七、页脚

图片

html

css

---

一、顶部导航条

顶部导航条图片    

html

  <!-- 顶部导航条 -->
  <div class="topbar">
    <!-- 版心 -->
    <div class="container clearfix">
      <!-- 左侧的欢迎区 -->
      <div class="welcome leftfix">
        <span class="hello">尚品汇欢迎您</span>
        <span>请</span>
        <a href="#" class="login">登录</a>
        <a href="#" class="regiseter">免费注册</a>
      </div>
      <!-- 右侧的导航区 -->
      <div class="topbar-nar rightfix">

        <ul class="list clearfix">
          <li><a href="#">我的订单</a></li>
          <li><a href="#">我的购物车</a></li>
          <li><a href="#">我的尚品汇</a></li>
          <li><a href="#">尚品汇会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li><a href="#">关注尚品汇</a></li>
          <li><a href="#">合作招商</a></li>
          <li><a href="#">商家后台</a></li>
        </ul>

      </div>
    </div>
  </div>

css

/* #region顶部导航条start */

.topbar {
  height: 30px;
  background-color: #ececec;
}

.welcome {
  height: 30px;
  line-height: 30px;
  font-size: 0;
  color: #666;
}

.welcome span,
.welcome a {
  font-size: 12px;
}

.welcome .hello {
  margin-right: 20px;
}

.welcome .login {

  padding-right: 10px;
  border-right: 1px black solid;
}

.welcome .regiseter {
  margin-left: 10px;
}

.topbar-nar .list {
  height: 30px;
  line-height: 30px;
}

.topbar-nar .list li {
  float: left;

}

.topbar-nar .list li a {
  padding: 0 15px;
  border-right: 1px solid #666;
}

.topbar-nar .list li:first-child a {
  padding-left: 0;

}

.topbar-nar .list li:last-child a {
  padding-right: 0;
  border: 0;
}

/* #endregion顶部导航条end */

二、头部

头部图片

html

<!-- 头部 -->
  <div class="header">
    <div class="container clearfix">
      <!-- 左侧logo区 -->
      <div class="logo leftfix">
        <img src="./images/logo.png" alt="">
      </div>
      <!-- 右侧搜索区 -->
      <div class="search rightfix">
        <form action="#">
          <input type="text">
          <button></button>
        </form>
      </div>
    </div>
  </div>

css

/* #region头部 */
.header {
  height: 120px;
}

.header .search {
  font-size: 0;
}

.header .search form {
  margin-top: 42px;
}


.header .search input {
  width: 508px;
  height: 34px;
  border: 1px solid #dd032D;
}

.header .search button {
  width: 80px;
  height: 36px;
  vertical-align: top;
  background-color: #dd032D;
  background-image: url('../images/serch_icon.png');
  background-repeat: no-repeat;
  background-position: 28px 6px;
}

/* #endregion头部end */

三、主导航
图片

html

<!-- 主导航 -->
  <div class="main-nav">
    <div class="container clearfix">
      <div class="all-types leftfix">全部商品分类</div>
      <ul class="main-nav-list leftfix clearfix">
        <li><a href="#">尚品超市</a></li>
        <li><a href="#">优惠券</a></li>
        <li><a href="#">买啥</a></li>
        <li><a href="#">尚品家电</a></li>
        <li><a href="#">尚品生鲜</a></li>
        <li><a href="#">plus会员</a></li>
        <li><a href="#">进口好物</a></li>
        <li><a href="#">品牌闪购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">五金商店</a></li>
      </ul>
    </div>
  </div>

css

/* #region主导航start*/
.main-nav {
  height: 48px;
  border-bottom: 1px solid #dd032D;
}

.main-nav .all-types {
  width: 190px;
  height: 48px;
  background-color: #dd032D;
  color: white;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
}

.main-nav .main-nav-list {
  height: 48px;
  line-height: 48px;
}

.main-nav .main-nav-list li {
  float: left;
  margin: 0 10px;
  font-size: 16px;
}

/* #endregion主导航end*/

四、主要内容区

图片

html

<!-- 主要内容区 -->
  <div class="main-content">
    <div class="container clearfix">
      <ul class="slide-nav leftfix">
        <li>
          <!-- 一级菜单 -->
          <a href="#">手机/运营商/数码</a>
          <!-- 二级菜单 -->
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>

        </li>

        <li><a href="#">电脑/办公</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">家具/家居/家装/厨具</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">男装/女装/童装/内衣</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">美妆/个护清洁/宠物</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">女鞋/箱包/钟表/珠宝</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">男鞋/运动/户外</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">房产/汽车/汽车用品</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">母婴/玩具乐器</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">食品/酒类/生鲜/特产</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">艺术/礼品鲜花/农资绿植</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">医药保健/计生情趣</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">图书/文娱/教育/电子书</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">机票/酒店/旅游/生活</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">众筹/白条/保险/企业金融</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
        <li><a href="#">安装/维修/清洗/二手</a>
          <div class="second-menu">
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>

            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
            <dl class="clearfix">
              <dt><a href="#">电子书刊</a></dt>
              <dd><a href="#">电子书</a></dd>
              <dd><a href="#">网络原创</a></dd>
              <dd><a href="#">数字杂志</a></dd>
              <dd><a href="#">数字杂志</a></dd>
            </dl>
          </div>
        </li>
      </ul>

      <div class="banner leftfix">
        <img src="images/banner主图.png" alt="">
      </div>
      <div class="slide-other leftfix">
        <div class="message">
          <div class="title">
            <span class="leftfix">尚品快报</span>
            <a href="#" class="rightfix">更多&nbsp;></a>
          </div>
          <ul class="msg-list">
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
            <li><a href="#">[特惠] 毛衣+直筒裤才是2YYDS</a></li>
          </ul>

        </div>
        <div class="other-nav">
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>火车</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
          <ul class="other-nav-list clearfix">
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
            <li>
              <div class="picture"></div>
              <span>话费</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>

css

/* #region主要内容区start */
.main-content {
  margin-top: 10px;
}

.main-content .slide-nav {
  width: 190px;
  height: 458px;
  background-color: #f4f4f4;
  position: relative;
}

.main-content .slide-nav li:hover {
  background-color: #dd032D;

}

.main-content .slide-nav li:hover>a {
  color: white;
}


.main-content .slide-nav li {
  font-size: 14px;
  height: 28px;
  line-height: 28px;
  padding-left: 16px;

}

.main-content .slide-nav li:hover .second-menu {
  display: block;
}


.main-content .banner {
  width: 690px;
  height: 458px;
  margin: 0 10px;
  background-color: green;
}

.main-content .slide-other {
  width: 290px;
  height: 458px;


}

.second-menu {
  width: 700px;
  height: 458px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 190px;
  display: none;
}

.second-menu dl {
  height: 36px;
  line-height: 36px;
}

.second-menu dl:first-child {
  margin-top: 10px;
}

.second-menu dt {
  width: 70px;
  float: left;
  padding-left: 20px;
  font-weight: bold;
  margin-right: 10px;
}



.second-menu dd {
  float: left;
}

.second-menu dd a {
  padding: 0 10px;
  border-left: 1px solid #666;
}

.slide-other .message {
  width: 260px;
  height: 156px;
  border: 1px solid #d9d9d9;
  padding: 0 14px;
}

.slide-other .message .title {
  height: 38px;
  line-height: 38px;
  border-bottom: 1px solid #d9d9d9;
}


.slide-other .message .title span {
  font-size: 14px;
}

.slide-other .message .title a {
  font-size: 12px;
}

.slide-other .other-nav {
  margin-top: 10px;
  width: 290px;
  height: 290px;
  /* background-color: grey; */
  overflow: hidden;
}

.slide-other .msg-list li {
  height: 26px;
  line-height: 26px;
}

.other-nav-list li {
  width: 48px;
  height: 70px;
  /* background-color: skyblue; */
  float: left;
  margin: 0 11px;
  text-align: center;
}

.other-nav-list:first-child {
  margin-top: 16px;
}

.other-nav-list:nth-child(2) {
  margin: 17px 0;
}

.other-nav-list li:first-child {
  margin-left: 16px;
}

.other-nav-list .picture {
  width: 48px;
  height: 48px;
  background-image: url('../images/精灵图-侧边功能.png');
}

.other-nav-list:nth-child(1) li:nth-child(1) .picture {
  background-position: 0 0;
}

.other-nav-list:nth-child(1) li:nth-child(2) .picture {
  background-position: -48px 0;
}

.other-nav-list:nth-child(1) li:nth-child(3) .picture {
  background-position: -96px 0;
}

.other-nav-list:nth-child(1) li:nth-child(4) .picture {
  background-position: -144px 0;
}

.other-nav-list:nth-child(2) li:nth-child(1) .picture {
  background-position: 0 48px;
}

.other-nav-list:nth-child(2) li:nth-child(2) .picture {
  background-position: -48px 48px;
}

.other-nav-list:nth-child(2) li:nth-child(3) .picture {
  background-position: -96px 48px;
}

.other-nav-list:nth-child(2) li:nth-child(4) .picture {
  background-position: -144px 48px;
}



.other-nav-list:nth-child(3) li:nth-child(1) .picture {
  background-position: 0 96px;
}

.other-nav-list:nth-child(3) li:nth-child(2) .picture {
  background-position: -48px 96px;
}

.other-nav-list:nth-child(3) li:nth-child(3) .picture {
  background-position: -96px 96px;
}

.other-nav-list:nth-child(3) li:nth-child(4) .picture {
  background-position: -144px 96px;
}

/* #endregion主要内容区end */

五、秒杀

图片

html

<!-- 秒杀 -->
  <div class="seckill">
    <div class="container clearfix">
      <img src="images/seckill.png" alt="">
      <img src="images/banner1.png" alt="">
      <img src="images/banner2.png" alt="">
      <img src="images/banner3.png" alt="">
      <img src="images/baner4.png" alt="">
    </div>
  </div>

css

/* #region秒杀区start */
.seckill {
  margin-top: 10px;
}

.seckill img {
  float: left;
  margin-right: 11px;
}

.seckill img:last-child {
  margin-right: 0;
}

/* #endregion秒杀区end */

六、楼层

图片

html

  <!-- 楼层 -->
  <div class="floor">
    <div class="container">
      <!-- 上部分 -->
      <div class="floor-nav clearfix">
        <span class="floor-name leftfix">家用电器</span>
        <ul class="floor-nav-list rightfix">
          <li><a href="#">热门</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">生活电器</a></li>
          <li><a href="#">厨房电器</a></li>
          <li><a href="#">应季电器</a></li>
          <li><a href="#">空气/净水</a></li>
          <li><a href="#">高端电器</a></li>
        </ul>
      </div>
      <!-- 下部分 -->
      <div class="floor-info clearfix">
        <div class="item item1">
          <ul class="item1-list clearfix">
            <li>节能补贴</li>
            <li>4K电视</li>
            <li>空气净化器</li>
            <li>IH电饭煲</li>
            <li>滚筒洗衣机</li>
            <li>电热水器</li>
          </ul>
          <img src="images/编组.png" alt="广告图">
        </div>
        <div class="item item2">
          <img src="images/appliance_banner07.png" alt="">
        </div>
        <div class="item item3">
          <img src="images/微波炉.png" alt="">
          <img src="images/空气炸锅.png" alt="">
        </div>
        <div class="item item4">
          <img src="images/冰箱.png" alt="">
        </div>
        <div class="item item5">
          <img src="images/电饭煲.png" alt="">
          <img src="images/电饭煲2.png" alt="">
        </div>
      </div>
    </div>
  </div>

css

/* #region楼层区start */
.floor {
  margin-top: 48px;
}

.floor-name {
  font-size: 20px;
}

.floor-nav {
  height: 30px;
  line-height: 30px;
  padding-bottom: 4px;
  border-bottom: 2px solid #dd032D;
}

.floor-nav-list li {
  float: left;
  font-size: 16px;
}

.floor-nav-list li a {
  padding: 0 10px;
  border-right: 1px solid #666;
}

.floor-nav-list li:first-child a {
  padding-left: 0;
}

.floor-nav-list li:last-child a {
  padding-right: 0;
  border: 0;
}

.floor-info .item {
  float: left;
}

.floor-info .item1 {
  width: 190px;
  height: 392px;
  background-color: #f4f4f4;
  padding: 20px;
}

.item1-list {
  margin-bottom: 29px;
}

.item1-list li {
  width: 90px;
  height: 22px;
  padding-bottom: 3.5px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  text-align: center;
}

.item1-list li:nth-child(2n-1) {
  float: left;
}

.item1-list li:nth-child(2n) {
  float: right;
}

.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
  margin: 14.4px 0px;
}

.floor-info .item2 {
  width: 340px;
  height: 432px;
  /* background-color: green; */
}

.floor-info .item3 {
  width: 206px;
  height: 432px;
  /* background-color: orange; */
  border-right: 1px solid #e2e2e2;
}

.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img {
  border-bottom: 1px solid #e2e2e2;
}

.floor-info .item4 {
  width: 206px;
  height: 432px;
  /* background-color: gray; */
  border-right: 1px solid #e2e2e2;
}


.floor-info .item5 {
  width: 206px;
  height: 432px;
  /* background-color: tomato; */
}

/* #endregion楼层区end */

七、页脚

图片

html

<!-- 页脚 -->
  <div class="footer">
    <div class="container">
      <!-- 顶部链接 -->
      <div class="top-links clearfix">
        <ul class="links-list">
          <li><a href="#">购物指南</a></li>
          <li><a href="#">购物流程</a></li>
          <li><a href="#">会员介绍</a></li>
          <li><a href="#">生活旅行</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">大家电</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>

        <ul class="links-list">
          <li><a href="#">配送方式</a></li>
          <li><a href="#">上门自提</a></li>
          <li><a href="#">211限时达</a></li>
          <li><a href="#">配送服务查询</a></li>
          <li><a href="#">配送费收取标准</a></li>
        </ul>
        <ul class="links-list">
          <li><a href="#">支付方式</a></li>
          <li><a href="#">货到付款</a></li>
          <li><a href="#">在线支付</a></li>
          <li><a href="#">分期付款</a></li>
          <li><a href="#">公司转账</a></li>
        </ul>
        <ul class="links-list">
          <li><a href="#">售后服务</a></li>
          <li><a href="#">售后政策</a></li>
          <li><a href="#">价格保护</a></li>
          <li><a href="#">退款说明</a></li>
          <li><a href="#">返修/退换货</a></li>
          <li><a href="#">取消订单</a></li>
        </ul>
        <ul class="links-list">
          <li><a href="#">特色服务</a></li>
          <li><a href="#">夺宝岛</a></li>
          <li><a href="#">DIY装机</a></li>
          <li><a href="#">延保服务</a></li>
          <li><a href="#">尚品汇E卡</a></li>
          <li><a href="#">尚品汇通信</a></li>
          <li><a href="#">尚品鱼座智能</a></li>
        </ul>
        <ul class="links-list">
          <li><a href="#">自营覆盖区县</a></li>
          <li><a href="#">尚品汇已向全国2661个区县</a></li>
          <li><a href="#">提供自 营配送服务，支持货到</a></li>
          <li><a href="#">付款、POS 机刷卡和售后上门</a></li>
          <li><a href="#">常见问题</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">查看详情</a></li>
        </ul>

      </div>
      <!-- 分割线 -->
      <div class="line"></div>
      <!-- 底部链接  -->
      <div class="bottom-links">
        <ul class="bottom-links-list clearfix">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">合作招商</a></li>
          <li><a href="#">商家帮助</a></li>
          <li><a href="#">营销中心</a></li>
          <li><a href="#">手机尚品</a></li>
          <li><a href="#">友情链接</a></li>
          <li><a href="#">销售联盟</a></li>
          <li><a href="#">隐私政策</a></li>
        </ul>
        <div class="copyright">京ICP备12345678901</div>
      </div>
    </div>
  </div>

css

/* #region页脚区start */

.footer {
  margin-top: 48px;
  height: 440px;
  background-color: #483e3e;
}

.links-list {
  float: left;
  height: 176px;
  width: 190px;
  margin-top: 48px;
  margin-right: 10px;
}

.links-list a {
  color: white;
  font-size: 14px;
}

.links-list:last-child {
  margin-right: 0;
}

.line {
  height: 2px;
  margin-top: 22px;
  background-color: #584D4D;
}

.bottom-links {
  text-align: center;
  margin-top: 47px;
}

.bottom-links-list {
  display: inline-block;
}

.bottom-links-list li {
  float: left;
}

.bottom-links-list li a {
  padding: 0 20px;
  border-right: 1px solid white;
  color: white;
}

.bottom-links-list li:first-child a {
  padding-left: 0;
}

.bottom-links-list li:last-child a {
  padding-right: 0;
  border: 0;
}

.copyright {
  color: white;
  margin-top: 10px;
}

/* #endregion页脚区end */