使用grid布局方式制作一个学生信息录入系统用户界面。单击“提交”按钮,将窗体背景颜色改为红色,并将首行标签显示内容更改为“信息已提交”;单击“重呈”按钮,将窗体背景颜色改为默认位('SystemButtonFace'),并将首行标签显示内容重呈为“学生信息录入系统”·…·
时间: 2023-10-06 20:06:02 浏览: 37
好的,以下是使用grid布局方式制作的学生信息录入系统用户界面的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生信息录入系统</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #fff;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
padding: 10px;
height: 100vh;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
textarea {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #0077cc;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
.submit {
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">学生信息录入系统</div>
<label>学号:</label>
<input type="text" name="id">
<label>姓名:</label>
<input type="text" name="name">
<label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<label>年龄:</label>
<input type="text" name="age">
<label>邮箱:</label>
<input type="email" name="email">
<label>简介:</label>
<textarea name="intro"></textarea>
<div class="submit">
<button id="submit-btn">提交</button>
<button id="reset-btn">重置</button>
</div>
</div>
<script>
var submitBtn = document.getElementById("submit-btn");
var resetBtn = document.getElementById("reset-btn");
var title = document.querySelector(".title");
var container = document.querySelector(".container");
submitBtn.addEventListener("click", function() {
container.style.backgroundColor = "#ff0000";
title.textContent = "信息已提交";
});
resetBtn.addEventListener("click", function() {
container.style.backgroundColor = "SystemButtonFace";
title.textContent = "学生信息录入系统";
});
</script>
</body>
</html>
```
当点击“提交”按钮时,会将窗体背景颜色改为红色,并将首行标签显示内容更改为“信息已提交”;当点击“重置”按钮时,会将窗体背景颜色改为默认位('SystemButtonFace'),并将首行标签显示内容重呈为“学生信息录入系统”。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)