帮我写一个html,页面中包含一个2行7列的表格,第一行分别为学号、姓名、专业、班级、寝室、性别、登记时间,另外在页面的右上角有一个返回按钮,点击可以跳转到其他页面,页面效果要炫酷一些,主色调为天蓝色。
时间: 2023-09-12 15:04:59 浏览: 191
### 回答1:
以下是一个示例 HTML 代码,可以满足您的要求:
```html
<html>
<head>
<style>
/* 定义表格样式 */
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度 */
}
td, th {
border: 1px solid #ddd; /* 表格边框 */
text-align: center; /* 文字居中 */
padding: 8px; /* 单元格内边距 */
}
/* 定义返回按钮样式 */
.back-button {
position: absolute; /* 绝对定位 */
top: 20px; /* 上边距 */
right: 20px; /* 右边距 */
background-color: skyblue; /* 背景色 */
color: white; /* 文字颜色 */
font-size: 18px; /* 文字大小 */
padding: 10px 20px; /* 按钮内边距 */
border: none; /* 去掉边框 */
cursor: pointer; /* 鼠标指针形状 */
}
/* 鼠标悬浮在按钮上时的样式 */
.back-button:hover {
background-color: steelblue; /* 背景色 */
}
</style>
</head>
<body>
<!-- 创建表格 -->
<table>
<!-- 创建表格行 -->
<tr>
<!-- 创建表格单元格 -->
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>班级</th>
<th>寝室</th>
<th>性别</th>
<th>登记时间</th>
</tr>
<!-- 创建表格行 -->
<tr>
<!-- 创建表格单元格 -->
<td>1001</td>
<td>张三</td>
<td>计算机科学</td>
<td>计科1班</td>
<td>1号寝室</td>
### 回答2:
<HTML>
<head>
<style>
body {
background-color: #B5E7FF;
}
table {
margin: 30px;
width: 80%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #FFFFFF;
}
th {
background-color: #0E6EB8;
color: #FFFFFF;
}
td {
background-color: #FFFFFF;
color: #000000;
}
#return-button {
position: absolute;
top: 30px;
right: 30px;
padding: 10px;
background-color: #0E6EB8;
color: #FFFFFF;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>班级</th>
<th>寝室</th>
<th>性别</th>
<th>登记时间</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>计算机科学</td>
<td>1班</td>
<td>101</td>
<td>男</td>
<td>2021-01-01</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>软件工程</td>
<td>2班</td>
<td>201</td>
<td>女</td>
<td>2021-01-02</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>电子商务</td>
<td>3班</td>
<td>301</td>
<td>男</td>
<td>2021-01-03</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
<td>信息管理</td>
<td>4班</td>
<td>401</td>
<td>女</td>
<td>2021-01-04</td>
</tr>
</table>
<button id="return-button" onclick="location.href='other_page.html'">返回</button>
</body>
</HTML>
### 回答3:
<html>
<head>
<style>
body {
background-color: #F0F8FF;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #777;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #777;
}
th {
background-color: #87CEFA;
color: white;
}
.button {
background-color: #87CEFA;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>班级</th>
<th>寝室</th>
<th>性别</th>
<th>登记时间</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>计算机科学</td>
<td>A班</td>
<td>301</td>
<td>男</td>
<td>2021-01-01</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>电子工程</td>
<td>B班</td>
<td>302</td>
<td>女</td>
<td>2021-01-02</td>
</tr>
<!-- 这里补充其他行的数据 -->
</table>
<a class="button" href="other_page.html">返回</a>
</body>
</html>
希望这个回答对您有所帮助!
阅读全文