视频：https://www.bilibili.com/video/BV1pE411q7FU?p=181&spm_id_from=pageDriver
    image.png
    image.png
    image.png
    例子

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     * {
    12.       margin: 0;
    13.       padding: 0;
    14.     }
    17.     .top {
    18.       height: 40px;
    19.       background-color: #333;
    20.     }
    22.     .banner {
    23.       width: 1000px;
    24.       height: 300px;
    25.       background-color: red;
    26.       margin: 10px auto;
    27.     }
    29.     .box {
    30.       width: 1000px;
    31.       height: 200px;
    32.       background-color: blue;
    33.       margin: 0 auto;
    34.     }
    36.     li {
    37.       list-style: none;
    38.     }
    40.     .box ul li {
    41.       width: 235px;
    42.       height: 200px;
    43.       background-color: pink;
    44.       float: left;
    45.       margin-right: 20px;
    46.     }
    48.     .box ul .last {
    49.       margin-right: 0;
    50.     }
    52.     .footer {
    53.       margin-top: 10px;
    54.       height: 200px;
    55.       background-color: #333;
    56.     }
    57.   </style>
    58. </head>
    60. <body>
    61.   <div class="top"></div>
    62.   <div class="banner"></div>
    63.   <div class="box">
    64.     <ul>
    65.       <li>1</li>
    66.       <li>2</li>
    67.       <li>3</li>
    68.       <li class="last">4</li>
    69.     </ul>
    70.   </div>
    71.   <div class="footer"></div>
    72. </body>
    74. </html>

    image.png