用Grid实现图片中的而已，不是简单的框架，要填充真实内容，力争百分百还原

<div class="container">
      <div class="item1">
        <a href="#">
          <img
            src="https://www.php.cn/static/images/index_learn_first.jpg"
            alt=""
            srcset=""
          />
        </a>
      </div>
      <div class="item2">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"
              alt="编程学习方法分享直播公益课"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i> 编程学习方法分享直播公益课</h4>
          </div>
        </a>
      </div>
      <div class="item3">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
              alt="编程学习方法分享直播公益课"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i> 2018前端入门_HTML5</h4>
          </div>
        </a>
      </div>
      <div class="item4">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i> CSS视频教程-玉女心经版</h4>
          </div>
        </a>
      </div>
      <div class="item5">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>JavaScript极速入门_玉女心经系列</h4>
          </div>
        </a>
      </div>
      <div class="item6">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>独孤九贱(6)_jQuery视频教程</h4>
          </div>
        </a>
      </div>
      <div class="item7">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>30分钟学会网站布局</h4>
          </div>
        </a>
      </div>
      <div class="item8">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>[公益直播]Web前端开发极速入门</h4>
          </div>
        </a>
      </div>
      <div class="item9">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>phpStudy极速入门视频教程</h4>
          </div>
        </a>
      </div>
      <div class="item10">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>ThinkPHP6.0极速入门(视频教程)</h4>
          </div>
        </a>
      </div>
      <div class="item11">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>独孤九贱(4)_PHP视频教程</h4>
          </div>
        </a>
      </div>
      <div class="item12">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>php完全自学手册</h4>
          </div>
        </a>
      </div>
      <div class="item13">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>MySQL权威开发指南（教程）</h4>
          </div>
        </a>
      </div>
      <div class="item14">
        <a href="#">
          <div>
            <img
              src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg"
              alt="CSS视频教程-玉女心经版"
              height="100%"
              width="100%"
              srcset=""
            />
            <h4><i>初级</i>[公益直播]PHP实战开发极速入门</h4>
          </div>
        </a>
      </div>
    </div>

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        display: grid;
        grid-template-columns: repeat(5, 217px);
        grid-template-rows: repeat(3, 172px);
        gap: 21px;
      }
      .container > div {
        width: 100%;
      }
      .item1 {
        grid-area: 1/1/3/2;
        height: 344px;
      }
    </style>

相关文章