收藏
批改状态：合格
老师批语：多写肯定是有必要的, 但写之前多想一会, 画个草图也很有必要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="css/style.css" </head> -->
<style>
table {
border-collapse: separate;
border-spacing: 0;
width: 800px;
margin: 20px auto;
font-weight: bolder;
box-shadow: 2px 2px 2px #888888;
position: relative;
/* 阴影部分四角圆形 */
border-radius: 15px;
}
th,
td {
border: 1px solid #444444;
text-align: center;
padding: 10px;
}
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
/* 指明thead>tr子元素 */
table thead>tr:first-of-type {
background-color: lightgreen;
}
table tbody>tr:first-of-type>td:first-of-type {
background-color: wheat;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: lightcyan;
}
table tfoot>tr:last-of-type {
background-color: lightgray
}
/* 通过css方式向页面添加伪元素 */
table:before {
content: '';
width: 798px;
height: 300px;
position: absolute;
left: 0;
top: 108px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568529754&di=c117f2318b781f296ad452ab4561f6ac&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.paishanglai.net%2Fpublic%2Fpcimgs%2F5551%2F155391908648570.jpg");
background-size: cover;
opacity: 0.4;
border-radius: 15px;
}
/* 四个边角边线圆形 */
table thead>tr:first-child>th:first-child {
border-top-left-radius: 15px;
}
table thead>tr:first-child>th:last-child {
border-top-right-radius: 15px;
}
table tfoot>tr:first-child>td:first-child {
border-bottom-left-radius: 15px;
}
table tfoot>tr:first-child>td:last-child {
border-bottom-right-radius: 15px;
}
</style>
<body>
<table>
<!-- 标题 -->
<caption>
<h2>课程表</h2>
</caption>
<!-- 表头 -->
<thead>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td rowspan="3">上午<br>8:00-11:30</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 rowspan="2">下午<br>14:00-16:00</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>备注</td>
<td colspan="5">xxxxxxxxxxx</td>
</tr>
</tfoot>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
注意点：
1 table属性：border-collapse: separate;
separate：边框可被分开
2 因为table增加了阴影属性，所以也需要给阴影增加圆角值；
3 需要独立给每个边角设置圆角。
一周总结：
1、学到了双飞翼以及圣杯布局，前都是只用float浮动；
2、学到了css设置表格属性，也挺方便的。
3、个人实战经验少，css元素等还是不太熟悉，需要多写多练。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
