html:
    （1）当一个整体快包含四部分时，这四个部分有框架和fas组成，那么可以四个部分可以不由块元素包围，而是采用a标签

    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/141移动端页面上部分.css">
    10.     <link rel="stylesheet" href="../../fa/css/all.css">
    11. </head>
    12. <body>
    13.     <div class="head-wrapper">
    14.         <div class="stream">
    15.             <a href="#"></a>
    16.             <i class="fas fa-stream"></i>
    17.         </div>
    18.         <h1 class="head-title">
    19.             <a href="#">
    20.                 爱学习
    21.             </a>
    22.         </h1>
    23.         <div class="search">
    24.             <a href="#"></a>
    25.             <i class="fas fa-search"></i>
    26.         </div>
    27.     </div>
    29.     <div class="banner">
    30.         <img src="../img/banner.png">
    31.     </div>
    33.     <nav class="button">
    34.             <a class="course" href="#">
    35.                 <i class="fas fa-book"></i>
    36.                 我的课程
    37.             </a>
    38.             <a class="teacher" href="#">
    39.                 <i class="fas fa-bullhorn"></i>
    40.                 我的老师
    41.             </a>
    42.             <a class="sub" href="#">
    43.                 <i class="fas fa-chart-pie"></i>
    44.                 我的订阅
    45.             </a>
    46.             <a class="download" href="#">
    47.                 <i class="fas fa-columns"></i>
    48.                 我的下载
    49.             </a>
    50.         </nav>
    51. </body>
    52. </html>

    less:
    （1）统一设置宽度和大小变量，并且将.w {} 写好，以后每一个直接通过 :extend(.w) {} 来引用
    （2）justify-content在flex布局中，设置主轴的对齐方式。 space-between是中间间隔，space-evenly; //定义了辅轴上的对齐方式， 均匀排列每个元素,每个元素之间的间隔相等//
    justify-content: space-around; //定义了主轴上的对齐方式，所有元素两端都有间隔//
    （3）当父元素设置为flex之后，那么a元素也可以设置长宽了

    @total-width:750;
@h:175;

.w {
    width: 693/40rem;
    margin: 0 auto;

}

html {
    font-size: 100vw/@total-width*40;
    background-color: #eff0f4;
}

.head-wrapper:extend(.w) {
    background-color: #eff0f4;
    display: flex;
    height: 8rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .stream {
        margin: 0 0 0 30px;
        font-size: 18px;
        color: #999999;
    }

    .search {
        margin: 0 30px 0 0;
        font-size: 18px;
        color: #999999;
    }

    .head-title {
        font-size: 30px;
        a {
            text-decoration: none;
            color: #24253d;
        }
    }
}

.banner:extend(.w) {
    border-radius: 10px;
    img {
        width: 100%;
    }
}

.button:extend(.w) {

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #eff0f4;
    height: 12rem;
    align-content: space-evenly;    //定义了辅轴上的对齐方式， 均匀排列每个元素,每个元素之间的间隔相等//
    justify-content: space-around;  //定义了主轴上的对齐方式，所有元素两端都有间隔//
    a {
        width: 10rem;
        height: 4rem;
        line-height: 4rem;
        text-decoration: none;
        color: #ffffff;
        i {
            margin: 0 22px 0 18px;
        }
    }

    .course {
        background-color: #f97053;
    }

    .teacher {
        background-color: #d17afd;
    }

    .sub {
        background-color: #ff3971;
    }

    .download {
        background-color: #1bc0fc;
    }
}

    image.png