收藏
批改状态：合格
老师批语：
3.22课后作业-用CSS控制表格！
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.22-用CSS控制表格属性</title>
<style type="text/css">
table,th,td{border:1px solid yellow;text-align:center;}
table{border-collapse:collapse; width:60%;margin:0 auto;
box-shadow:5px 5px 5px brown;background-image: url(images/3.jpg);
background-repeat:no-repeat;background-size:100% 500px;}
th{background-color:rgba(8,150,220,0.8);}
table caption{font-size:24px;font-weight:bolder;margin-bottom:20px;}
td img{border-radius:50%;box-shadow:2px 2px 2px brown;}
</style>
</head>
<body>
<div>今天的任务是做一张表格，用CSS来控制！</div>
<div>今天需要掌握的几个常用标签及属性和值:<br>
1.background-size:cover 用来设置背景图的缩放！还可以用宽高来设置图片的大小 如： 500px 200px; 或 100% 20% 来设置！<br>
2.font-weight:bolder 用来设置字体的加粗！<br>
3.border-radius:50% 用来设置块元素的圆角！<br>
4.border-collapse 用来设置表格边框重叠！<br>
5.box-shadow: 2px 2px 2px red; 为块元素设置阴影！</div>
<table>
<caption>员工信息表</caption>
<tr>
<th>工号</th>
<th>姓名</th>
<th>照片</th>
<th>职位</th>
<th>部门</th>
<th>资历</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td><img src="images/6.jpg" width="30"></td>
<td>助理</td>
<td rowspan="2">营销部</td>
<td>0.8年</td>
</tr>
<tr>
<td>1020</td>
<td>李四</td>
<td><img src="images/7.jpg" width="30"></td>
<td>文员</td>
<td>1.8年</td>
</tr>
<tr>
<td>1025</td>
<td>王五</td>
<td><img src="images/8.jpg" width="30"></td>
<td>专员</td>
<td rowspan="2">企划部</td>
<td>1.5年</td>
</tr>
<tr>
<td>1088</td>
<td>赵六</td>
<td><img src="images/9.jpg" width="30"></td>
<td>经理</td>
<td>3.5</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
