html:
    （1）每一个单个图片和文字都要用div去包裹，这样才可以设置一些特殊样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../../css/reset.css">
    9.     <link rel="stylesheet" href="../css/135淘宝导航.css">
    11. </head>
    12. <body>
    13.     <nav class="nav">
    14.         <div class="header-nav">
    15.             <div class="item">
    16.                 <a href="#">
    17.                     <img src="../img/1.png" alt="">
    18.                     <span>天猫</span>
    19.                 </a>
    20.             </div>
    22.             <div class="item">
    23.                 <a href="#">
    24.                     <img src="../img/2.png" alt="">
    25.                     <span>聚划算</span>
    26.                 </a>
    27.             </div>
    29.             <div class="item">
    30.                 <a href="#">
    31.                     <img src="../img/3.png" alt="">
    32.                     <span>天猫超市</span>
    33.                 </a>
    34.             </div>
    36.             <div class="item">
    37.                 <a href="#">
    38.                     <img src="../img/4.png" alt="">
    39.                     <span>司法拍卖</span>
    40.                 </a>
    41.             </div>
    43.             <div class="item">
    44.                 <a href="#">
    45.                     <img src="../img/5.png" alt="">
    46.                     <span>淘宝心选</span>
    47.                 </a>
    48.             </div>
    49.         </div>
    50.         <div class="header-nav">
    51.             <div class="item">
    52.                 <a href="#">
    53.                     <img src="../img/6.png" alt="">
    54.                     <span>天天特卖</span>
    55.                 </a>
    56.             </div>
    58.             <div class="item">
    59.                 <a href="#">
    60.                     <img src="../img/7.png" alt="">
    61.                     <span>飞猪旅行</span>
    62.                 </a>
    63.             </div>
    65.             <div class="item">
    66.                 <a href="#">
    67.                     <img src="../img/8.png" alt="">
    68.                     <span>智能生活</span>
    69.                 </a>
    70.             </div>
    72.             <div class="item">
    73.                 <a href="#">
    74.                     <img src="../img/9.png" alt="">
    75.                     <span>主题市场</span>
    76.                 </a>
    77.             </div>
    79.             <div class="item">
    80.                 <a href="#">
    81.                     <img src="../img/10.png" alt="">
    82.                     <span>苏宁易购</span>
    83.                 </a>
    84.             </div>
    86.         </div>
    87.     </nav>
    88. </body>
    89. </html>

    css:
    （1）每行之间的空格用justify-content: space-around; Distribute items evenly Items have a half-size space on either end
    （2）因为 a img span均为行内元素，所以无法设置width和text-algin;这些均是设置在块内元素中，如果当前元素为行内元素，则设置在其父元素中
    （3）img 的width大小要设置为100%,否则不会随着浏览器大小而变化。设置图片和文字的空白，因为img不是行内元素，而span时行内元素，所以设置在img中
    （4） a中设置text-decoration:none;因为span为行内元素无法有效用

    .nav {
    width: 100%;
}

.header-nav {
    display: flex;
    /* flex: auto; */
    justify-content: space-around;

}

.item {
    width: 15%;
    text-align: center;
}

.item img {
    width: 100%;
    margin-bottom: 10px;
}

.header-nav .item a {
    text-decoration: none;
    color: orange;
    font-size: 16px;
}