1.图文列表
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图文列表</title> <style> .new { display: flex; list-style: none; text-align: center; } </style></head><body> <ul class="new"> <li class="news"> <a href="https://www.php.cn/"><img src="https://img01.sogoucdn.com/app/a/100520115/ae406a57b3412d75c3b510f6ac6a62a0" alt="" style="width: 350px;height: 200px;"><br>php中文网</a> </li> <li class="news"> <a href="https://www.php.cn/course/1382.html"><img src="https://img.php.cn/upload/course/000/000/041/6209c897986f5556.jpg" alt="" style="width: 400px;height: 200px;"><br>前端开发课程</a> </li> <li class="news"> <a href="https://www.php.cn/course/1383.html"><img src="https://img.php.cn/upload/course/000/000/041/6209c922e38a3299.jpg" alt="" style="width: 400px;height: 200px;"><br>后端开发课程（暂未开启）</a> </li> </ul></body></html>
实现：
2.课程表
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课程表</title> <style type="text/css"> .ju { text-align: center; } .shang { background-color: aqua; } table { width: 900px; border-top: 1px solid #999; border-left: 1px solid #999; border-spacing: 0; margin: auto; } table td { padding: 10px 30px; border-bottom: 1px solid #999; border-right: 1px solid #999; } .color { background-color: bisque; } </style></head><body> <div class="ju"> <table> <caption> <h3>19期PHP课程表</h3> </caption> <thead> <tr class="color"> <td>时间</td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> </tr> </thead> <tbody> <tr> <td rowspan="4" class="shang">上午</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td colspan="6" class="color">中午休息</td> </tr> <tr> <td rowspan="3" class="shang">下午</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> <td>摸鱼</td> </tr> <tr> <td colspan="6" class="color">晚饭时间</td> </tr> <tr> <td rowspan="2" class="shang">晚上</td> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> </tr> <tr> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> <td>前端基础教程</td> </tr> </tbody> <tfoot> <tr> <td colspan="6" class="color">睡觉时间</td> </tr> </tfoot> </table> </div></body></html>
实现：
