6.分类导航栏 nav

<!-- 分类导航栏 -->
<nav>
  <a href="#">
    <img src="images/nav1.png" alt="">
    <div class="title">苏宁秒杀</div>
  </a>
  <a href="#">
    <img src="images/nav2.png" alt="">
    <div class="title">苏宁超市</div>
  </a><a href="#">
  <img src="images/nav3.png" alt="">
  <div class="title">苏宁拼购</div>
  </a><a href="#">
  <img src="images/nav4.png" alt="">
  <div class="title">手机数码</div>
  </a><a href="#">
  <img src="images/nav5.png" alt="">
  <div class="title">苏宁家电</div>
  </a><a href="#">
  <img src="images/nav6.png" alt="">
  <div class="title">免费水果</div>
  </a><a href="#">
  <img src="images/nav7.png" alt="">
  <div class="title">super会员</div>
  </a><a href="#">
  <img src="images/nav8.png" alt="">
  <div class="title">签到有礼</div>
  </a><a href="#">
  <img src="images/nav9.png" alt="">
  <div class="title">领券中心</div>
  </a><a href="#">
  <img src="images/nav10.png" alt="">
  <div class="title">更多频道</div>
  </a>
  </nav>

// nav
nav {
  width: (750rem / @baseFont);

  a {
    float: left;//浮动的一个特性包括可以给宽高
    width: (150rem / @baseFont);
    height: (142rem / @baseFont);

    img {
      display: block;//img是行内元素，不能给宽和高，得把它转换为块元素
      width: (84rem / @baseFont);
      height: (84rem / @baseFont);
      margin: (5rem / @baseFont) auto 0;
    }

    .title {
      font-size: (22rem / @baseFont);
      text-align: center;
      margin-top: (5rem / @baseFont);
      color: #666;
    }
  }
}