写一个所有选手参赛 信息的总览页面的代码用html和css写
时间: 2023-12-18 16:02:37 浏览: 39
好的,以下是一个简单的用HTML和CSS写的所有选手参赛信息总览页面的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>选手参赛信息总览</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 80%;
max-width: 800px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>所有选手参赛信息总览</h1>
<table>
<thead>
<tr>
<th>选手姓名</th>
<th>参赛项目</th>
<th>成绩</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>游泳比赛</td>
<td>1分30秒</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>跑步比赛</td>
<td>10秒</td>
<td>第一名</td>
</tr>
<tr>
<td>王五</td>
<td>篮球比赛</td>
<td>35分</td>
<td>第二名</td>
</tr>
<tr>
<td>赵六</td>
<td>射箭比赛</td>
<td>95环</td>
<td>第三名</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个页面使用了一些CSS样式来设置页面的背景、字体、表格样式等等。其中table元素用来创建一个表格,thead元素用来创建表格的表头,tbody元素用来创建表格的主体部分,tr元素用来创建表格的行,th和td元素用来创建表格的表头和单元格,分别用来表示表头和表格中的单元格。这个页面可以根据需要进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)