帮我用html写一个学生信息查询页面,页面包含一个输入框用于输入学生的学号通过post方法提交,另外还有一个查询按钮和一个返回按钮,点击按钮跳转到不同的地址上,页面帮我美化的炫酷一些。
时间: 2023-08-31 18:26:06 浏览: 144
jsp页面同时弹出页面和对话框
4星 · 用户满意度95%
### 回答1:
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>` 标签包含了文档的元数据,如
### 回答2:
当然可以帮你写一个学生信息查询页面。首先,我们需要创建一个HTML文件,并在文件中添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生信息查询</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 15px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.return-btn {
display: block;
width: 100%;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>学生信息查询</h1>
<form action="query.php" method="post">
<label for="studentId">学号:</label>
<input type="text" name="studentId" id="studentId" placeholder="请输入学生学号" required>
<button type="submit">查询</button>
</form>
<a href="index.html" class="return-btn">返回</a>
</div>
</body>
</html>
```
在上面的代码中,我们使用了CSS样式来美化页面。页面背景使用了浅灰色(#f2f2f2),容器使用了白色背景,并添加了边框和阴影效果。标题居中显示,黑色字体。输入框和按钮都采用了绿色背景,鼠标悬停时背景颜色变浅。返回按钮居中显示。
在代码中,我们使用了一个表单(form)元素来包装输入框和按钮。输入框的类型设置为文本(type="text"),并且使用了必填属性(required)。按钮的类型设置为提交(type="submit"),点击后将表单数据以POST方式提交到query.php文件。
最后,我们添加了一个返回按钮(链接到index.html页面)作为页面的附加功能。
请将以上代码复制到一个HTML文件中,并将该文件保存为.html后缀名的文件,然后在浏览器中打开即可看到美化的学生信息查询页面。
### 回答3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息查询</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #444;
}
.container {
margin: 0 auto;
max-width: 600px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-group {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.input-group input {
padding: 10px;
width: 200px;
border-radius: 5px;
border: 1px solid #ccc;
}
.input-group button {
margin-left: 20px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.input-group button:hover {
background-color: #0056b3;
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.button-container a {
margin-right: 10px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
text-decoration: none;
}
.button-container a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>学生信息查询</h1>
<form action="查询结果页面地址" method="post">
<div class="input-group">
<input type="text" name="学号" placeholder="请输入学生学号">
<button type="submit">查询</button>
</div>
</form>
<div class="button-container">
<a href="不同地址1">返回</a>
<a href="不同地址2">其他按钮</a>
</div>
</div>
</body>
</html>
阅读全文