html用设计一个浅蓝色电影评分榜单页面 并注释
时间: 2023-06-19 20:04:32 浏览: 224
以下是一个简单的浅蓝色电影评分榜单页面的示例代码,同时包含注释:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影评分榜单</title>
<style>
/* 设置背景颜色 */
body {
background-color: #f0f8ff;
}
/* 设置页面标题样式 */
h1 {
color: #0066cc;
text-align: center;
}
/* 设置表格样式 */
table {
border-collapse: collapse;
width: 80%;
margin: auto;
}
/* 设置表格头部样式 */
th {
background-color: #0066cc;
color: #fff;
height: 50px;
text-align: center;
}
/* 设置表格单元格样式 */
td {
height: 30px;
text-align: center;
}
/* 设置表格奇数行的背景颜色 */
tr:nth-child(odd) {
background-color: #e6f3ff;
}
/* 设置表格偶数行的背景颜色 */
tr:nth-child(even) {
background-color: #d5e8ff;
}
</style>
</head>
<body>
<h1>电影评分榜单</h1>
<table>
<thead>
<tr>
<th>排名</th>
<th>电影名称</th>
<th>评分</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>阿甘正传</td>
<td>9.4</td>
</tr>
<tr>
<td>2</td>
<td>肖申克的救赎</td>
<td>9.3</td>
</tr>
<tr>
<td>3</td>
<td>霸王别姬</td>
<td>9.2</td>
</tr>
</tbody>
</table>
</body>
</html>
```
解释:
1. `background-color` 属性用于设置页面的背景颜色,这里设置为浅蓝色 `#f0f8ff`。
2. `h1` 标签用于设置页面标题样式,包括颜色和文本对齐方式。
3. `table` 标签用于创建一个表格,通过设置 `border-collapse` 属性为 `collapse` 可以将表格的边框合并,使其看起来更美观。
4. `th` 标签用于设置表格头部样式,包括背景颜色、文字颜色、高度和文本对齐方式。
5. `td` 标签用于设置表格单元格样式,包括高度和文本对齐方式。
6. `tr:nth-child(odd)` 和 `tr:nth-child(even)` 用于分别设置表格奇数行和偶数行的背景颜色,以区分不同的行。
阅读全文