image.png

制作思想

  • subnav-entry ul大盒子，10个li
  • li 里面包 a
  • a 里面包 2个span
  • ul 用display：flex
  • li flex：20%

index.html

  2.   <!-- 侧导航栏 -->
  3.   <ul class="subnav-entry">
  4.     <li>
  5.       <a href="#">
  6.         <span class="subnav-entry-icon"></span>
  7.         <span>WiFi电话卡</span>
  8.       </a>
  9.     </li>
  10.     <li>
  11.       <a href="#">
  12.         <span class="subnav-entry-icon"></span>
  13.         <span>WiFi电话卡</span>
  14.       </a>
  15.     </li>
  16.     <li>
  17.       <a href="#">
  18.         <span class="subnav-entry-icon"></span>
  19.         <span>WiFi电话卡</span>
  20.       </a>
  21.     </li>
  22.     <li>
  23.       <a href="#">
  24.         <span class="subnav-entry-icon"></span>
  25.         <span>WiFi电话卡</span>
  26.       </a>
  27.     </li>
  28.     <li>
  29.       <a href="#">
  30.         <span class="subnav-entry-icon"></span>
  31.         <span>WiFi电话卡</span>
  32.       </a>
  33.     </li>
  34.     <li>
  35.       <a href="#">
  36.         <span class="subnav-entry-icon"></span>
  37.         <span>WiFi电话卡</span>
  38.       </a>
  39.     </li>
  40.     <li>
  41.       <a href="#">
  42.         <span class="subnav-entry-icon"></span>
  43.         <span>WiFi电话卡</span>
  44.       </a>
  45.     </li>
  46.     <li>
  47.       <a href="#">
  48.         <span class="subnav-entry-icon"></span>
  49.         <span>WiFi电话卡</span>
  50.       </a>
  51.     </li>
  52.     <li>
  53.       <a href="#">
  54.         <span class="subnav-entry-icon"></span>
  55.         <span>WiFi电话卡</span>
  56.       </a>
  57.     </li>
  58.     <li>
  59.       <a href="#">
  60.         <span class="subnav-entry-icon"></span>
  61.         <span>WiFi电话卡</span>
  62.       </a>
  63.     </li>
  65.   </ul>

index.css

/* 侧导航栏 */
.subnav-entry {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  margin: 0 5px;
  padding: 4px 0;
  background-color: #fff;
}

.subnav-entry li {
  flex: 20%;
}

.subnav-entry li a {
  display: flex;
  margin-top: 4px;
  flex-direction: column;
  align-items: center;
}

.subnav-entry-icon {
  width: 28px;
  height: 28px;
  background: url(../images/subnav-bg.png) no-repeat;
  background-size: 28px auto;
}