帮我写一个学生信息查询的html页面,页面有一个输入框,输入学生学号,另外有两个按钮,一个是查询按钮,一个是返回按钮,点击按钮跳转到不同的url地址上,并帮我美化页面。
时间: 2023-08-31 21:19:26 浏览: 149
### 回答1:
好的,首先,这是一个简单的学生信息查询 HTML 页面的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息查询</title>
<style>
/* 美化页面的 CSS 代码 */
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
font-size: 16px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 20px;
}
input[type="button"],
input[type="submit"] {
width: 100%;
font-size: 16px;
padding: 12px 20px;
border: 1px solid #333;
border-radius: 4px;
background-color: #333;
color: white;
cursor: pointer;
}
input[type="button"]:hover,
input[type="submit"]:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>学生信息查询</h1>
<form action="/query" method="get">
<input type="text" name="student_id" placeholder="输入学生学号">
<input type="submit" value="查询">
<input type="button" value="返回" onclick="location.href='/'">
</form>
</div>
</body>
</html>
```
该页面包含一个表单,表单中有一个文本输入框和两个按钮。点击 "查询" 按钮时,会使用 GET 方法发送一个请求到 "/query" 路径。点击 "返回" 按钮时,
### 回答2:
当然可以!下面是一个简单的学生信息查询的HTML页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息查询</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type="text"] {
padding: 5px;
margin: 10px;
width: 200px;
}
button {
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>学生信息查询</h1>
<input type="text" id="studentID" placeholder="请输入学号">
<button id="searchBtn" onclick="search()">查询</button>
<button id="returnBtn" onclick="goBack()">返回</button>
<script>
function search() {
var studentID = document.getElementById("studentID").value;
if (studentID.length > 0) {
window.location.href = "http://www.example.com/search/" + studentID;
}
}
function goBack() {
window.history.back();
}
</script>
</body>
</html>
```
这个HTML页面包含一个输入框用于输入学生学号,同时还有两个按钮,一个用于查询,一个用于返回。查询按钮被点击时,会获取输入框内的学号,并将其拼接到URL地址上跳转到相应的学生信息查询页面。返回按钮被点击时,会返回上一个页面。此外,页面使用了一些简单的CSS样式来美化页面,使其更易于使用。
希望这能帮到你!如果还有其他问题,请随时向我提问。
### 回答3:
你好!下面是一个简单的学生信息查询的HTML页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息查询</title>
<style>
body {
text-align: center;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
}
.container {
margin: 100px auto;
width: 300px;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
}
.btn-group {
display: flex;
justify-content: space-between;
}
.btn-group button {
width: 140px;
padding: 10px;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
}
.btn-group button.query-btn {
background-color: #4CAF50;
}
.btn-group button.return-btn {
background-color: #ff0000;
}
.btn-group button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>学生信息查询</h1>
<div class="form-group">
<input type="text" id="student-id" placeholder="请输入学生学号">
</div>
<div class="btn-group">
<button class="query-btn" onclick="query()">查询</button>
<button class="return-btn" onclick="window.location.href='返回地址'">返回</button>
</div>
</div>
<script>
function query() {
var studentId = document.getElementById("student-id").value;
if (studentId) {
window.location.href = "查询地址?id=" + studentId;
}
}
</script>
</body>
</html>
```
在这个示例中,将页面内容包裹在一个名为`container`的容器中,并设置其样式。页面包括一个标题、一个输入框和两个按钮。其中查询按钮会调用JavaScript函数`query()`,该函数获取输入框中的学号,并将其作为参数添加到查询地址中进行跳转。返回按钮与之类似,通过设置`window.location.href`属性跳转到相应的返回地址。
至于页面美化,这个示例中使用了CSS样式来设置背景颜色、字体样式、容器样式和按钮样式。你可以根据自己的喜好和需求修改CSS部分来美化页面。
阅读全文