<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>css列表 编程笔记 html5&css&js</title>
<meta charset="utf-8"/>
<style>
body {
color: white;
background-color: #00bfff; /* 更改为亮蓝色背景 */
}
#customers {
border-collapse: collapse;
width: 90%;
margin: 50px auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.1); /* 添加半透明白色背景 */
}
#customers td,
#customers th {
border: 1px solid #ffcc00; /* 边框颜色改为亮黄色 */
padding: 8px;
background-color: rgba(255, 255, 255, 0.2); /* 单元格添加半透明白色背景 */
}
#customers tr:nth-child(even) {
background-color: #d1eaff; /* 修改为浅亮蓝色 */
}
#customers tr:hover {
background-color: #a7ffeb; /* 修改为亮丽蓝色鼠标悬停颜色 */
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
background-color: #ff9100; /* 表头背景色改为亮橙色 */
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>课节</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>第一节</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>外语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第二节</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>外语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第三节</td>
<td>科学</td>
<td>数学</td>
<td>语文</td>
<td>外语</td>
<td>政治</td>
<td>活动</td>
<td></td>
</tr>
<tr>
<td>第四节</td>
<td>科学</td>
<td>数学</td>
<td>语文</td>
<td>外语</td>
<td>政治</td>
<td>活动</td>
<td></td>
</tr>
<tr>
<td>中午</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第五节</td>
<td>音乐</td>
<td>体育</td>
<td>艺术</td>
<td>阅读</td>
<td>游戏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第六节</td>
<td>音乐</td>
<td>体育</td>
<td>艺术</td>
<td>阅读</td>
<td>游戏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>班会</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>班会</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
