grid网格布局最新课程部分

最新课程单元

HTML部分

   <body>
    <h2>最新课程</h2>
    <div class="conteiner">
        <div><img src="img/623d6ce036b81626.jpg"/>
        <i>初级</i> JavaScript基础语法【dom|bom|es6新语法|jQuery
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p></div>
        <div><img src="img/62398b673ecc4667.jpg" >
        <i>初级</i> 前端最全HTTP基础原理及应用<br>
        <p ><img class="sc"src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/62398b5dadc79937.jpg" >
        <i>初级</i>HTTP协议<br><br>
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/62381b3e817d4409.jpg" >
        <i>初级</i>接口开发规范【服务器端标准的接口Restful API开发全过程】
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div ><img src="img/623057031def7707.jpg" >
        <i>初级</i>MySQL查询优化方案【大厂架构师亲授】
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/622efba5b8f59620.jpg" >
        <i>初级</i>Web前端Promise教程从入门到精通
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div> 
        <div><img src="img/622ee24c8180c270.jpg" >
        <i>初级</i>Bootstrap框架讲解<br><br>
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/6226fe0150292919.jpg" >
        <i>初级</i>【小白入门 通俗易懂】一周学会Linux
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/6225aaf1beb5a942.jpg" >
        <i>初级</i>仿美团APP实战开发【前端程序员必备的JavaScript项目实战】
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
        <div><img src="img/6226d78b754aa110.png" >
        <i>初级</i>公益直播：PHP入门到实战--实现邮箱验证（队列发送邮件）
        <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
        </div>
    </div>
        </body>

css部分

` *{
margin: 0px;
padding: 0px;
box-sizing: border-box;

     }
     body{
    font-size: 14px;
    font-family: "微软雅黑";
    background-color: #e0e2e3;
     }
     h2{
    margin-left: 176px;
    margin-top: 150px;
    margin-bottom: -50px;
    }
      .conteiner{
    /* 网格容器 */
    display: grid;
    /* 2行5列 */
    grid-template-columns:repeat(5,14.375rem);
    grid-template-rows: repeat(2,14.9375rem);
    margin-left: 170px;
    margin-top: 100px;
    /* 网格行列边距 */
    grid-row-gap: 20px;
    grid-column-gap: 28px;
    }
      .conteiner .sc{
    /* 收藏图片宽高 */
    width: 15px;
    height:15px;
    margin-left: 160px;
    margin-right: 10px;
    margin-top: 30px;
    color:#bababa
     }
     .conteiner p{
    color: #93999f;
     }
     .conteiner div{
    /* 网格内背景颜色 */
    background-color:#ffffff;
    /* 网格圆角 */
    border-radius: 10px;
     }
     .conteiner img{
    width:14.375rem;
    height:8.4385rem;
    /* 网格内图片圆角 */
    border-radius: 10px 10px 0px 0px;
     }
     .conteiner i{
        display: block;
        float: left;
        width: 28px;
        height: 16px;
        background: #93999f;
        line-height: 16px;
        overflow: hidden;
        text-align: center;
        font-style: normal;
        font-size: 11px;
        color: #ffffff;
        margin-right: 10px;
        margin-left: 20px;
        margin-top: 3px;
     }

最新课程单元

HTML部分

css部分

实例效果图

相关文章