用html设计一个学生成绩管理系统
时间: 2023-11-17 21:05:33 浏览: 81
以下是一个简单的 HTML 学生成绩管理系统设计:
```html
<!DOCTYPE html>
<html>
<head>
<title>学生成绩管理系统</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
form {
margin-bottom: 20px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>学生成绩管理系统</h1>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
<th>操作</th>
</tr>
<!-- 这里可以使用后端语言(如 Python)动态生成表格数据 -->
<tr>
<td>001</td>
<td>张三</td>
<td>90</td>
<td>85</td>
<td>92</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>77</td>
<td>92</td>
<td>80</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</table>
<h2>添加学生成绩</h2>
<form>
<label for="stu_id">学号:</label>
<input type="text" id="stu_id" name="stu_id" required>
<label for="stu_name">姓名:</label>
<input type="text" id="stu_name" name="stu_name" required>
<label for="stu_chinese">语文成绩:</label>
<input type="text" id="stu_chinese" name="stu_chinese" required>
<label for="stu_math">数学成绩:</label>
<input type="text" id="stu_math" name="stu_math" required>
<label for="stu_english">英语成绩:</label>
<input type="text" id="stu_english" name="stu_english" required>
<input type="submit" value="添加">
</form>
</body>
</html>
```
这个设计包括一个学生成绩列表和一个表单用于添加学生成绩。你可以在后端使用 Python 等语言来动态生成表格数据,也可以使用 JavaScript 等技术实现更复杂的功能。