image.png

制作思想

  • nav-items 盒子 用 display：flex，盒子里面包 a

index.html

  2.   <!-- 主导航栏 -->
  3.   <nav>
  4.     <div class="nav-common">
  5.       <div class="nav-items">
  6.         <a href="">酒店</a>
  7.       </div>
  8.       <div class="nav-items">
  9.         <a href="#">特价酒店</a>
  10.         <a href="#">特价酒店</a>
  11.       </div>
  12.       <div class="nav-items">
  13.         <a href="#">特价酒店</a>
  14.         <a href="#">特价酒店</a>
  15.       </div>
  16.     </div>
  18.     <div class="nav-common">
  19.       <div class="nav-items">
  20.         <a href="">酒店</a>
  21.       </div>
  22.       <div class="nav-items">
  23.         <a href="#">特价酒店</a>
  24.         <a href="#">特价酒店</a>
  25.       </div>
  26.       <div class="nav-items">
  27.         <a href="#">特价酒店</a>
  28.         <a href="#">特价酒店</a>
  29.       </div>
  30.     </div>
  32.     <div class="nav-common">
  33.       <div class="nav-items">
  34.         <a href="">酒店</a>
  35.       </div>
  36.       <div class="nav-items">
  37.         <a href="#">特价酒店</a>
  38.         <a href="#">特价酒店</a>
  39.       </div>
  40.       <div class="nav-items">
  41.         <a href="#">特价酒店</a>
  42.         <a href="#">特价酒店</a>
  43.       </div>
  44.     </div>
  46.   </nav>

index.css

/* 主导航栏 */
nav {
  border-radius: 10px;
  margin: 3px 5px 3px;
}

nav .nav-common {
  display: flex;
  height: 88px;
  background-color: pink;
}


nav .nav-common:nth-child(2) {
  margin: 3px 0;
}

nav .nav-common .nav-items {
  flex: 1px;
  display: flex;
  flex-direction: column;

}

nav .nav-common .nav-items:nth-child(-n+2) {
  border-right: 1px solid #fff;
}

nav .nav-common .nav-items a {
  flex: 1;
  line-height: 44px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, .2);
}


nav .nav-common .nav-items a:nth-child(1) {
  border-bottom: 1px solid #fff;
}


nav .nav-common .nav-items:nth-child(1) a {
  border-bottom: 0;
  background: url(../images/hotel.png) no-repeat bottom center;
  background-size: 121px auto;
}