图文列表与课程表

1.图文列表

 <ul>
        <li>
         <div class="img">
            <a href="#"><img src="https://img.php.cn/upload/course/000/000/068/625e52df2dd4f914.jpg" alt=""></a>
        <p class="dw">公益直播</p> 
        </div>  
         <h3>
            <a href="#">公益直播：PHP入门到实战--实现邮箱验证（队列发送邮件）</a>
         </h3> 
         <p><span class="one">精彩回放</span><span class="two"><i>11291</i>人感兴趣</span></p>
        </li>
        <li>
            <div class="img">
               <a href="#"><img src="https://img.php.cn/upload/course/000/000/001/624e4c82a65d0931.jpg" alt=""></a>
           <p class="dw">直播班</p> 
           </div>  
            <h3>
               <a href="#">第二期_大前端线上班</a>
            </h3> 
            <p><span class="one">精彩回放</span><span class="two"><i>8948</i>人感兴趣</span></p>
           </li>
           <li>
            <div class="img">
               <a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png" alt=""></a>
           <p class="dw">直播班</p> 
           </div>  
            <h3>
               <a href="#">第二十期_前端开发</a>
            </h3> 
            <p><span class="one">精彩回放</span><span class="two"><i>3483</i>人感兴趣</span></p>
           </li>
    </ul>

body{
        background-color: rgb(241, 239, 239);
    }
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    i{
        font-style: normal;
    }
    li{
        height: 275px;
        list-style: none;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    a{
        text-decoration: none;
        color: #333;
    }
   ul{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 20px;
        width: 890px;
        margin: 50px auto;
    }
    .img a{
        display: block;
        height: 160px;
        transition: all 0.2s;
    }
    .img{
        position: relative;
        overflow: hidden;
    }
    .dw{
        position: absolute;
    right: 8px;
    top: 8px;
        height: 22px;
    background: linear-gradient(to top, rgb(235, 196, 134), rgba(250, 228, 193));
    padding: 0px 3px 0px 3px;
    border-radius: 3px;
    color: #93652a;
    font-size: 12px;
    line-height: 22px;
    }
    img{
        border-radius: 8px 8px 0 0;
        width: 100%;
    }
    a:hover{
        transform: scale(1.1);
    }
    h3{
        height: 42px;
        font-size: 16px;
        margin: 10px 15px ;
        font-weight: normal;
    }
    h3:hover a{
        color: red;
    }
    p{
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;;
        font-size: 14px;
    }
    .one{
        color: #666;
    }
    .two{
        color: #b7b7b7;
    }

2.课程表

<table>
    <caption>课程表</caption>
    <thead>
        <tr class="two">
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <div class="one">
            </div>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td rowspan="2">语文</td>
        </tr>
        <tr>
            <td>2</td>
            <td>语文</td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>3</td>
            <td>体育</td>
            <td>语文</td>
            <td rowspan="2">品德</td>
            <td>语文</td>
            <td rowspan="2">美术</td>
        </tr>
        <tr>
            <td>4</td>
            <td>体育</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td colspan="6">午休</td>
        </tr>
        <tr>
            <td>5</td>
            <td>体育</td>
            <td>语文</td>
            <td>品德</td>
            <td>语文</td>
            <td>美术</td>
        </tr>
    </tbody>
</table>

<style>
caption{
    margin-bottom: 10px;
    color: hotpink;
    font-size: 20px;
    font-weight: bold;
}
table,th,td{
    text-align: center;
    border: 1px solid orange;
    border-collapse: collapse;
}
th,td{
    width: 50px;
    height: 50px;
}
th{
    color: orange;
}
.one{
    position: absolute;
    top: 44px;
    width: 0;
    height: 0;
    border-left: 27px solid hotpink;
    border-right: 27px solid orange;
    border-bottom: 27px solid hotpink;
    border-top: 27px solid orange;
}
.two{
    position: relative;
}
</style>