Correction status:qualified
Teacher's comments:
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3月22日作业-CSS课程表</title> <style type="text/css"> div{ width: 480px; height: 280px; background-image:url(images/bg/bg01.jpg); padding:30px; margin: auto; } table,th,td{ border: 1px solid #78041a; } table{ margin:30px 10px 10px 70px; width: 80%; border-collapse: collapse; text-align: center; box-shadow: 3px 3px 3px #666; background-color: lightgreen; font-family: "幼圆"; } td img{ width: 15px; border-radius: 50%; box-shadow: 1px 1px 1px #888; } th{ background-color: lightpink; } .morning{ background-color: lightskyblue; text-shadow: 1px 1px 1px #888; } .afternoon{ background-color: yellow; text-shadow: 1px 1px 1px #888; } caption{ text-shadow: 1px 1px 1px #888; } </style> </head> <body> <div> <table> <tr> <caption><h3>2018年下学期课程表</h3></caption> </tr> <tr> <th colspan="2">节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td class="morning" rowspan="4">上午</td> <td><img src="images/01.jpg"></td> <td>数学</td> <td>英语</td> <td>语文</td> <td>数学</td> <td>语文</td> </tr> <tr> <td><img src="images/02.jpg"></td> <td>语文</td> <td>数学</td> <td>化学</td> <td>语文</td> <td>数学</td> </tr> <tr> <td><img src="images/03.jpg"></td> <td>物理</td> <td>语文</td> <td>英语</td> <td>化学</td> <td>英语</td> </tr> <tr> <td><img src="images/04.jpg"></td> <td>英语</td> <td>物理</td> <td>数学</td> <td>英语</td> <td>化学</td> </tr> <tr> <td class="afternoon" rowspan="4">下午</td> <td><img src="images/05.jpg"></td> <td>美术</td> <td>体育</td> <td>政治</td> <td>地理</td> <td>历史</td> </tr> <tr> <td><img src="images/06.jpg"></td> <td>政治</td> <td>音乐</td> <td>自习</td> <td>体育</td> <td>班会</td> </tr> <tr> <td><img src="images/07.jpg"></td> <td>自习</td> <td>自习</td> <td>自习</td> <td>自习</td> <td></td> </tr> <tr> <td><img src="images/08.jpg"></td> <td>自习</td> <td>自习</td> <td>体活</td> <td>自习</td> <td></td> </tr> </table> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
手写: