使用Grid布局仿php中文网模块

废话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Grid(网格)布局-仿php中文网模块</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        display: grid;
        width: 1200px;
        /* 3行5列 */
        grid-template-columns: repeat(5, 217px);
        grid-template-rows: repeat(3, 176px);
        gap: 20px;
        margin: auto;
      }
      .item img {
        width: 217px;
        height: 124px;
        border-radius: 10px;
      }
      .item:first-of-type {
        grid-row-start: 1;
        grid-row-end: 3;
      }
      .item:first-of-type img {
        width: 217px;
        height: 372px;
      }
      a {
        text-decoration: none;
      }
      .item {
        /* 设置相对定位 */
        position: relative;
      }
      .font {
        /* 设置绝对定位 */
        position: absolute;
        top: 100px;
        font-size: 14px;
        height: 74px;
        width: 217px;
        /* 边框圆角 */
        border-radius: 10px;
        background-color: #fff;
        /* 盒子阴影 */
        box-shadow: 0px 0px 10px #888888;
        /* 设置鼠标悬停图标 */
        cursor: pointer;
      }
      .font h3 {
        font-size: 14px;
        color: #07111b;
        padding: 16px 0 6px;
        margin-left: 20px;
        font-weight: 400;
      }
      .font i {
        font-size: 12px;
        background-color: #93999f;
        color: white;
        margin: 2px 4px 0 0;
        padding: 2px;
      }
      .font div {
        color: #93999f;
        font-size: 12px;
        padding: 0 20px;
        margin-top: 10px;
      }
      .header {
        width: 1200px;
        height: 40px;
        font-size: 20px;
        font-weight: bold;
        color: #4d555d;
        margin: 40px auto 10px;
        /* 文字水平居中 */
        text-align: center;
      }
      .font-color {
        color: royalblue;
        font-size: 20px;
      }
      /* 去掉i标签斜体 */
      i {
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <i class="iconfont icon-ai-code font-color"></i>php精品入门课程<i
        class="iconfont icon-ai-code font-color"
      ></i>
    </div>
    <div class="container">
      <div class="item">
        <a href=""><img src="img/1.jpg" class="img-left" alt="" /></a>
      </div>
      <div class="item">
        <a href=""
          ><img src="img/2.png" alt="" />
          <div class="font">
            <h3><i>初级</i>编程学习方法分享直播</h3>
            <div><span>1W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/3.jpg" alt="" />
          <div class="font">
            <h3><i>初级</i>2018前端入门_HTML5</h3>
            <div><span>18W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/4.jpg" alt="" />
          <div class="font">
            <h3><i>初级</i>CSS视频教程-玉女心经</h3>
            <div><span>10W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/5.jpg" alt="" />
          <div class="font">
            <h3><i>初级</i>javaScript极速入门_玉</h3>
            <div><span>18W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/6.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>独孤九贱(6)_jQuery</h3>
            <div><span>12W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/7.jpeg" alt="" />
          <div class="font">
            <h3><i>初级</i>30分钟学会网页布局</h3>
            <div><span>6W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/8.jpg" alt="" />
          <div class="font">
            <h3><i>初级</i>[公益直播]Web前端开发</h3>
            <div><span>5W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/9.jpg" alt="" />
          <div class="font">
            <h3><i>初级</i>phpStudy极速入门视频</h3>
            <div><span>40W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/10.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>ThinkPHP6.0极速入门</h3>
            <div><span>4W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/11.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>独孤九贱(4)_PHP视频</h3>
            <div><span>50W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/12.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>php完全自学手册</h3>
            <div><span>20W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/13.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>MySQL权威开发指南</h3>
            <div><span>2W+次播放</span></div>
          </div></a
        >
      </div>
      <div class="item">
        <a href=""
          ><img src="img/14.jpg" alt="" />
          <div class="font">
            <h3><i>中级</i>[公益直播]PHP实战开播</h3>
            <div><span>3W+次播放</span></div>
          </div></a
        >
      </div>
    </div>
  </body>
</html>

效果图：

ps：这个grid网格布局用起来真是太爽了，不过属性相比FlexBox布局的属性多了不少，多去熟悉它的属性，运用它，相信大家都会进步的更快，布局起来更爽！

批改老师：

天蓬老师

批改状态：合格

老师批语：不错, 不错

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php服务器环境、Visual Studio Code编辑器配置、markdown语法初体验

2020-06-11 13:52:12