收藏
批改状态：合格
老师批语：
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>点击 "运行实例" 按钮查看在线实例
（未完待续）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
