仿php中文网课程模块grid布局 - 前端

首页 > 博客列表 > 仿php中文网课程模块grid布局

博主信息

博文 16

粉丝 2

访问量 25560

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

仿php中文网课程模块grid布局

肖傲的博客

原创

897人浏览过

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>php入门精品课程布局</title>
    <style>
      * {
        /* 样式初始化 */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
      }
      .course {
        width: 1200px;
        height: 660px;
        margin: auto;
        border-radius: 10px;
        box-shadow: 0 0 5px #888888;
        background-color: #fff;
      }
      .title {
        display: flex;
        height: 80px;
        justify-content: center;
        align-items: center;
      }
      .title > h3 {
        font-size: 20px;
        color: #4d555d;
      }
      .container {
        width: 1180px;
        height: 550px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 20px;
      }
      /* 设置弹性容器 垂直 不换行  */
      .container .item:not(:first-of-type) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
      }
      .container > .item {
        /* border: 1px solid #000; */
        width: 217px;
        height: 172px;
        position: relative;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
        place-content: space-between;
        overflow: hidden;
      }
      .container > div {
        border-radius: 10px;
      }
      .container > .item:first-of-type {
        grid-row: span 2;
        height: 360px;
        box-shadow: none;
        /* background-color: steelblue; */
      }
      /* 让图片缩放并靠上 */
      .container > .item > img {
        width: 100%;
        position: absolute;
        top: 0;
      }
      /* 用绝对定位让span靠底部定位 */
      .container > .item > span:first-of-type {
        font-size: 12px;
        color: #93999f;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 42px;
        line-height: 42px;
        padding: 0 20px;
        background: #fff;
        /* border: 1px solid red; */
      }
      /* 用相对定位进行定位，并调整高度值让h3与固定的span之间重叠让多余的字隐藏 */
      .container > .item > h3 {
        font-size: 14px;
        font-weight: 400;
        position: relative;
        padding: 10px 10px 0 10px;
        min-height: 84px;
        top: 10px;
        /* overflow: hidden; */
        border-radius: 5%;
        background-color: #fff;
        /* 减慢浮出效果 */
        transition: 0.6s;
        /* border: 1px solid red; */
      }
      .container > .item > h3 > i {
        color: white;
        background-color: #93999f;
        font-style: normal;
        font-size: 14px;
      }
      .container > .item > h3 > p {
        font-size: 12px;
        color: #93999f;
        text-align: center;
        height: 40px;
        line-height: 20px;
        padding-top: 10px;
      }
      .container > .item > h3:hover {
        background-color: #fff;
        min-height: 130px;
      }
    </style>
  </head>
  <body>
    <div class="course">
      <div class="title">
        <span></span>
        <h3>PHP入门精品课程</h3>
        <span></span>
      </div>
      <div class="container">
        <div class="item">
          <img src="images/1.jpg" alt="" />
        </div>
        <div class="item">
          <img src="images/2.png" alt="" />
          <h3>
            <i>初级</i>
            编程学习方法分享直播公益课
          </h3>
          <span>1W+次播放</span>
        </div>
        <div class="item">
          <img src="images/3.jpg" alt="" />
          <h3>
            <i>初级</i>
            2018前端入门_HTML5
          </h3>
          <span>18W+次播放</span>
        </div>
        <div class="item">
          <img src="images/4.jpg" alt="" />
          <h3>
            <i>初级</i>
            CSS视频教程-玉女心经版
            <p>本章节讲解的是有关CSS基础的内容，轻松明快，适合新手观看学习。</p>
          </h3>
          <span>10W+次播放</span>
        </div>
        <div class="item">
          <img src="images/5.jpg" alt="" />
          <h3>
            <i>初级</i>
            JavaScript极速入门_玉女心经系列
          </h3>
          <span>18W+次播放</span>
        </div>
        <div class="item">
          <img src="images/6.jpg" alt="" />
          <h3>
            <i>初级</i>
            独孤九贱(6)_jQuery视频教程
          </h3>
          <span>12W+次播放</span>
        </div>
        <div class="item">
          <img src="images/7.jpeg" alt="" />
          <h3>
            <i>初级</i>
            30分钟学会网站布局
          </h3>
          <span>6W+次播放</span>
        </div>
        <div class="item">
          <img src="images/8.jpg" alt="" />
          <h3>
            <i>初级</i>
            [公益直播]Web前端开发极速入门]
          </h3>
          <span>5W+次播放</span>
        </div>
        <div class="item">
          <img src="images/9.jpg" alt="" />
          <h3>
            <i>初级</i>
            phpStudy极速入门视频教程
          </h3>
          <span>40W+次播放</span>
        </div>
        <div class="item">
          <img src="images/10.jpg" alt="" />
          <h3>
            <i>中级</i>
            独孤九贱(4)_PHP视频教程
          </h3>
          <span>4W+次播放</span>
        </div>
        <div class="item">
          <img src="images/11.jpg" alt="" />
          <h3>
            <i>中级</i>
            独孤九贱(4)_PHP视频教程
          </h3>
          <span>50W+次播放</span>
        </div>
        <div class="item">
          <img src="images/12.jpg" alt="" />
          <h3>
            <i>初级</i>
            php完全自学手册
          </h3>
          <span>20W+次播放</span>
        </div>
        <div class="item">
          <img src="images/13.jpg" alt="" />
          <h3>
            <i>初级</i>
            MySQL权威开发指南（教程
          </h3>
          <span>2W+次播放</span>
        </div>
        <div class="item">
          <img src="images/14.jpg" alt="" />
          <h3>
            <i>中级</i>
            [公益直播]PHP实战开发极速入门
          </h3>
          <span>3W+次播放</span>
        </div>
      </div>
    </div>
  </body>
</html>

效果如下：

总结：grid布局能快速布局出想要的整体布局，但是完善里面的具体内容需要用的定位等其他知识，增加边框有时候能更好的去布局想要完整实现整个网页布局需要综合掌握html和css的各种知识。多学多练多思考才能不断进步。

批改老师：

Guanhui

批改状态：合格

老师批语：效果很好！完成的不错！

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

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

0条评论

作者最新博文

visualstudio的安装和markdown常用语法及小皮面板设置

2020-06-11 17:59:29