帮我用html写一个学生信息查询页面,页面包含一个输入框用于输入学生的学号通过post方法提交,另外还有一个查询按钮和一个返回按钮,点击按钮跳转到不同的地址上,页面帮我美化的炫酷一些。
时间: 2023-02-06 08:31:49 浏览: 93
HTML 是超文本标记语言 (HyperText Markup Language) 的缩写,是用于创建网站的标准标记语言。
以下是一个学生信息查询页面的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息查询</title>
<style>
/* 给页面添加一些炫酷的样式 */
body {
background-color: #f4f4f4;
font-family: sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
input[type="text"] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
width: 20%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>学生信息查询</h1>
<form method="post" action="/student-info">
<label for="student-id">学号:</label><br>
<input type="text" id="student-id" name="student-id"><br>
<input type="submit" value="查询">
<a href="/"><input type="button" value="返回"></a>
</form>
</div>
</body>
</html>
```
上面的代码中,我们使用了一些 HTML 元素来创建这个页面。
- `<!DOCTYPE html>` 声明了这是一个 HTML5 文档。
- `<html>` 标签定义了文档的根元素。
- `<head>` 标签包含了文档的元数据,如
阅读全文