图文列表和课程表
1.图文列表/课程表
<!DOCTYPE html><html lang="zh-CN"><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></head><style> .title, .piclist{ width: 600px; text-align: center; overflow: hidden; } .piclist li{ float: left; list-style: none; width: 200px; height: auto; } table,tr,td,thead{ margin: 0; padding: 0; border: 1px solid rgb(99, 96, 96); border-spacing: 0; text-align: center; } thead, tfoot{ background-color: aquamarine; }</style><body><h3 class="title">图文列表</h3><ul class="piclist"> <li><a href="/"><img src="static/images/bear.jpg" alt="树袋熊"></img></a><a href="">树袋熊</a></li> <li><a href="/"><img src="static/images/dog.jpg" alt="小狗"></img></a><a href="">小狗</a></li> <li><a href="/"><img src="static/images/duck.jpg" alt="小鸭"></img></a><a href="">小鸭</a></li></ul><hr><table> <caption>高坪一小课程表</caption> <thead> <tr> <td>日期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> </thead> <tbody> <!-- 上午 --> <tr> <td rowspan="4">上午</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> </tbody> <tbody> <!-- 中午 --> <tr> <td colspan="6">中午休息</td> </tr> </tbody> <tbody> <!-- 下午 --> <tr> <td rowspan="4">下午</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></td></td> </tr> <tr> <td>体育</td> <td>语文</td> <td>语文</td> <td>数学</td> <td>数学</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">每天下午后两节为课后辅导！</td></td> </tr> </tfoot></table></body></html>
2.效果图
