1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>最美的风景</title>
    7.     <style>
    8.         *{
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         header{
    13.             width: 100%;
    14.             height: 80px;
    15.             background:linear-gradient(to right,rgb(92, 127, 141),rgb(129, 109, 149),rgb(161, 128, 133));
    16.             font-size: 0.8cm;
    17.             text-align: center;
    18.             line-height: 80px;
    19.             color: white;
    20.             /* 字间距 */
    21.             letter-spacing: 20px;
    22.         }
    23.         section{
    24.             display: flex;
    25.             flex-wrap: wrap;
    26.             margin: 5px;
    27.         }
    28.         img{
    29.             margin: 5px;
    30.             /* calc((总宽度100% - 图片外边距5px * 左右外边距2 * 四个图片4) / 一行有四个图片4) */
    31.             width: calc((100% - 5px * 2 * 4) / 4);
    32.         }
    33.         @media (max-width:1200px) {
    34.             img{
    35.                 width: calc((100% - 5px * 2 * 3) / 3);
    36.             }
    37.         }
    38.         @media (max-width:800px) {
    39.             img{
    40.                 width: calc((100% - 5px * 2 * 2) / 2);
    41.             }
    42.         }
    43.         @media (max-width:500px) {
    44.             img{
    45.                 width: calc(100% - 5px * 2);
    46.             }
    47.         }
    48.     </style>
    49. </head>
    50. <body>
    51.     <header>图片库</header>
    52.     <!-- section>img[src="./图片库/$.jpg"][alt="text"]*20 -->
    53.     <section>
    54.         <img src="./图片库/1.jpg" alt="text">
    55.         <img src="./图片库/2.jpg" alt="text">
    56.         <img src="./图片库/3.jpg" alt="text">
    57.         <img src="./图片库/4.jpg" alt="text">
    58.         <img src="./图片库/5.jpg" alt="text">
    59.         <img src="./图片库/6.jpg" alt="text">
    60.         <img src="./图片库/7.jpg" alt="text">
    61.         <img src="./图片库/8.jpg" alt="text">
    62.         <img src="./图片库/9.jpg" alt="text">
    63.         <img src="./图片库/10.jpg" alt="text">
    64.         <img src="./图片库/11.jpg" alt="text">
    65.         <img src="./图片库/12.jpg" alt="text">
    66.         <img src="./图片库/13.jpg" alt="text">
    67.         <img src="./图片库/14.jpg" alt="text">
    68.         <img src="./图片库/15.jpg" alt="text">
    69.         <img src="./图片库/16.jpg" alt="text">
    70.         <img src="./图片库/17.jpg" alt="text">
    71.         <img src="./图片库/18.jpg" alt="text">
    72.         <img src="./图片库/19.jpg" alt="text">
    73.         <img src="./图片库/20.jpg" alt="text">
    74.     </section>
    75. </body>
    76. </html>