亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

通過3月20號晚上學(xué)習(xí),基本熟悉grid布局的簡單使用方法.用grid布局方式實現(xiàn)php中文網(wǎng)熱門推薦課程的布局,html和css代碼如下:
html代碼:

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

    <div class="hotcourses">
        <h1>熱門課程</h1>
        /*需要復(fù)制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次學(xué)習(xí)</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{
    /* 鼠標(biāo)放上去圖片變大 */
    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;
}

執(zhí)行效果如下:

批改老師：PHPz

批改狀態(tài)：合格

老師批語：完成的很好，效果實現(xiàn)的不錯，最新課程的后面還有一個“更多”