仿PHP中文网的热门推荐栏目

<h2>热门推荐</h2>
        <div class="courses-list">
            <div class="course">
                <a href="">
                    <img src="C:\Users\hao_z\Desktop\php\static\picture\hot_courses\hot_course_1.png" alt="">
                </a>
                <div class="desc">
                    <div class="title">
                        <small class="tag chu">初级</small>
                        <a href="">小白拯救者: PHP7基础语法快速预览</a>
                    </div>
                    <div class="other">
                        <span>88787次学习</span>
                        <!-- <div class="shoucang">
                            <input type="checkbox" name="shoucang" id="shoucang">
                            <label for="shoucang">收藏</label>
                        </div> -->
                        <a href="" class="shoucang">☆ 收藏</a>
                    </div>
                </div>
            </div>

body{
    background-color: #efefef;
    padding: 2px;
}
body a{
    text-decoration: none;
    color: #555;
    font-size: small;
}
body a:hover{
    color: red;
}
.hot_courses{
    width: 1020px;
    /* border: 1px solid black; */
    /* 居中 */
    margin: 0 auto;
}
.hot_courses .courses-list{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px 10px;
}
.courses-list .course{
    background-color: white;
    border-radius: 5px;
    /* 溢出隐藏 */
    overflow: hidden;
}
.chu{
    color: #00aaff;
    background-color: hsla(196, 79%, 94%, 0.782);
}
.zhong{
    color: red;
    background-color: rgb(241, 204, 190);
    /* opacity: 40%; */
}
.hot_courses .courses-list img{
    /* 100%填充 */
    width: 100%;
    border-radius: 5px 5px 0 0;
}
.hot_courses .courses-list img:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.hot_courses .courses-list .desc{
    padding: 15px;
}
.hot_courses .courses-list .desc .tag{
    border-radius: 2px;
    padding: 2px 5px;
    font-size: x-small;
}
.hot_courses .courses-list .title>a{    
    font-weight: 500;
}
.hot_courses .courses-list .title{
    height: 40px;
    overflow: hidden;
}
.hot_courses .courses-list .desc .other{
    color: #aaa;
    font-size: x-small;
    display: flex;
    place-content: space-between;
    margin-top: 10px;
}
.hot_courses .courses-list .desc .other>a{
    color: #aaa;
    font-size: x-small;
}

总结：

能看出来的效果基本都放上了，还有几点不足：收藏应该不是a标签，效果像CheckBox，但用CheckBox做不出来一样的效果；颜色不好调，应该是没掌握技巧。