3.列表页导航 nav 制作

• 这个最外边的盒子样式和首页的一样，所以结构和样式类名可以一样
• 然后在 nav 盒子里左边放一个 sk_list 盒子，右边 放一个sk_con 盒子
• sk_list 和 sk_con 里面用 ul li a

list.html

  <!-- nav 导航制作 start -->
  <nav class="nav">
    <div class="w">
      <div class="sk_list">
        <ul>
          <li><a href="#">品优秒杀</a></li>
          <li><a href="#">即将售罄</a></li>
          <li><a href="#">超值低价</a></li>
        </ul>
      </div>
      <div class="sk_con">
        <ul>
          <li><a href="#">女装</a></li>
          <li><a href="#" class="style_red">女鞋</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>
  </nav>
  <!-- nav 导航制作 end -->

list.css

/* nav 导航制作 start*/
.sk_list {
  float: left;
}

.sk_list ul li {
  float: left;
  line-height: 48px;
}

.sk_list ul li a {
  display: block;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.sk_con {
  float: left;
}

.sk_con ul li {
  float: left;
  line-height: 48px;
}

.sk_con ul li a {
  display: block;
  padding: 0 23px;
  font-size: 14px;
}

.sk_con ul li:last-child a::after {
  content: '\e91e';
  font-family: 'icomoon';
}

/* nav 导航制作 end*/