Correction status:qualified
Teacher's comments:
PHP学习第6课作业0322
作业要求:
要求:用到我们学到的盒模型知识,圆角盒子,阴影盒子,至少要用到三种选择器。
整个案例必须简洁,大方,美观,实用。
然后就作业发布到博客上,并将代码手抄一遍同步发布。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.0322CSS表格设置</title> <style> /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td { border: 1px solid #333; } /*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/ table { /*折叠表格线*/ border-collapse: collapse; text-align: center; width: 60%; /*表格居中*/ margin: 50px auto; box-shadow: 3px 3px 3px #888; background-image: url(../images/gs/bg.jpg); background-repeat: no-repeat; background-size: cover; } table caption { font-size: 1.6em; font-weight: bolder; margin-bottom: 30px; } th,td { padding: 10px; } td img { border-radius: 50%; box-shadow: 2px 2px 2px #888; } th { background-color: rgba(155,155,0,0.3); color: brown; } .green { color: darkgreen; font-weight: bolder; font-size: 1.2em; } </style> </head> <body> <table> <caption>§ 第六课,CSS控制表格实例 §</caption> <tr> <th>序号</th> <th>名称</th> <th>作用</th> <th>头像</th> <th>备注1</th> <th>备注2</th> <th>备注3</th> </tr> <tr> <td>1</td> <td>边框</td> <td>使表格清晰可见</td> <td><img src="../images/gs/1.jpg" alt="" width="50"></td> <td>无</td> <td>无</td> <td class="green">无</td> </tr> <tr> <td>2</td> <td>圆角</td> <td>美化表格</td> <td><img src="../images/gs/2.jpg" alt="" width="50"></td> <td>圆角看着舒服些</td> <td>无</td> <td class="green">无</td> </tr> <tr> <td>3</td> <td>阴影</td> <td>使表格有立体感</td> <td><img src="../images/gs/3.jpg" alt="" width="50"></td> <td>无</td> <td>无</td> <td class="green">无</td> </tr> <tr> <td>4</td> <td>待添加</td> <td>待添加</td> <td><img src="../images/gs/4.jpg" alt="" width="50"></td> <td>无</td> <td>无</td> <td class="green">无</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
(未完待续)