通过3月20号晚上学习,基本熟悉grid布局的简单使用方法.用grid布局方式实现php中文网热门推荐课程的布局,html和css代码如下:
html代码:

/*引入css*/
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3957845_h9ekcg68p3s.css">
    <link rel="stylesheet" href="./css/hot-course2.css">

    <div class="hotcourses">
        <h1>热门课程</h1>
        /*需要复制course-list div10次*/
        <div class="course-list">
            <div class="course">
                <a href="">
                    <img src="./img/hot_img.png" alt="">
                </a>
                <div class="desc">
                    <div class="title">
                        <small class="tag">初级</small>
                        <a href="">PHP是最好的编程语言编程语言</a>    
                    </div>
                    <div class="other">
                       <span>35325次学习</span>
                       <span class="iconfont icon-shoucang1 sc-1">&nbsp收藏</span>
                    </div>
                </div> 
            </div>
        </div>
    </div>

CSS代码如下:

body{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    background-color: #e6e6e6;
}
body a{
    text-decoration: none;
    color:#555;
    font-size: small;
}
body a:hover{
    color:red
}
.hotcourses{
    width: 1000px;
    /* border: 1px solid #000; */
    margin: 0 auto;
}
.course-list{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 20px 10px;
}
.course-list .course{
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.course-list .course .desc{
    padding: 10px;
    display: grid;
    gap: 10px;
}
.course-list .course img{
      width: 100%;
      border-radius: 5px 5px 0 0 ;
}
.course-list .course img:hover{
    /* 鼠标放上去图片变大 */
    transform: scale(1.1);
    /* 图片变化速度0.3秒 */
    transition: 0.3s;
}
.course .title .tag{
    background-color:lightsalmon;
    padding: 3px;
    color: #fff;
    font-size: x-small;
}
.course-list .course .desc .other{
    display: flex;
    place-content: space-between;
    color: #aaa;
    font-size:small;
}
.course-list .course .desc .other .sc-1{
    font-size: small;
}
.course-list .course .desc .other .sc-1:hover{
    color: red;
    cursor: pointer;
}

执行效果如下:

批改老师：PHPz

批改状态：合格

老师批语：完成的很好，效果实现的不错，最新课程的后面还有一个“更多”