老师请检查

来源：3-24 编程练习

帅得无心敲代码

2021-04-08 15:52:13

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        body {
            display: flex;
            justify-content: center;
        }
        #box {
            width: 80%;
            background: #ccc;
            display: flex;
            flex-wrap: wrap;
        }
        img {
            width: 100%;
        }
        @media (min-width:440px) {
            img {
                width: 50%;
            }
        }
        @media (min-width:780px) {
            img {
                width: 33.33333333%;
            }
        }
        @media (min-width:960px) {
            img {
                width: 25%;
            }
        }
    </style>
  </head>
  <body>
    <div id="box">
      <img
        src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg"
        alt=""
      />
      <img
        src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg"
        alt=""
      />
      <img
        src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg"
        alt=""
      />
      <img
        src="http://img.mukewang.com/climg/5a45e49100014e5010601059.jpg"
        alt=""
      />
      <img
        src="http://img.mukewang.com/climg/5a45e53b00012e6d09940789.jpg"
        alt=""
      />
      <img
        src="http://img.mukewang.com/climg/5a45e53c0001d04e09940732.jpg"
        alt=""
      />
    </div>
  </body>
</html>