我来为您创建一个功能完整、设计现代的学生信息管理网页，这个页面将包含学生列表、添加/编辑功能、搜索筛选等实用功能。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">学生信息管理系统</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
header h1 {
text-align: center;
font-size: 2.5rem;
font-weight: 300;
}
.controls {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-bottom: 25px;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.search-box {
flex: 1;
min-width: 250px;
position: relative;
}
.search-box input {
width: 100%;
padding: 12px 40px 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 25px;
font-size: 16px;
transition: all 0.3s ease;
}
.search-box input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: #e0e0e0;
color: #333;
}
.btn-secondary:hover {
background: #d0d0d0;
}
.btn-danger {
background: #ff6b6b;
color: white;
}
.btn-danger:hover {
background: #ff5252;
}
.table-container {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background: #f8f9fa;
}
th {
padding: 15px;
text-align: left;
font-weight: 600;
color: #555;
border-bottom: 2px solid #e0e0e0;
}
td {
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
tbody tr {
transition: all 0.3s ease;
}
tbody tr:hover {
background: #f8f9fa;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.actions {
display: flex;
gap: 10px;
}
.btn-sm {
padding: 6px 12px;
font-size: 14px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
animation: fadeIn 0.3s ease;
}
.modal-content {
position: relative;
background: white;
max-width: 500px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
animation: slideIn 0.3s ease;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.modal-header h2 {
color: #333;
font-size: 1.5rem;
}
.close {
font-size: 28px;
cursor: pointer;
color: #999;
transition: color 0.3s ease;
}
.close:hover {
color: #333;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.modal-footer {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 25px;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
text-align: center;
}
.stat-card h3 {
font-size: 2rem;
color: #667eea;
margin-bottom: 5px;
}
.stat-card p {
color: #666;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state svg {
width: 100px;
height: 100px;
margin-bottom: 20px;
opacity: 0.3;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.controls {
flex-direction: column;
}
.search-box {
width: 100%;
}
table {
font-size: 14px;
}
th, td {
padding: 10px;
}
.actions {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>学生信息管理系统</h1>
</div>
</header>
<main class="container">
<!-- 统计卡片 -->
<div class="stats">
<div class="stat-card">
<h3 id="totalStudents">0</h3>
<p>总学生数</p>
</div>
<div class="stat-card">
<h3 id="maleStudents">0</h3>
<p>男生人数</p>
</div>
<div class="stat-card">
<h3 id="femaleStudents">0</h3>
<p>女生人数</p>
</div>
<div class="stat-card">
<h3 id="avgAge">0</h3>
<p>平均年龄</p>
</div>
</div>
<!-- 控制区域 -->
<div class="controls">
<div class="search-box">
<input type="text" id="searchInput" placeholder="搜索学生姓名、学号或专业...">
<span class="search-icon">🔍</span>
</div>
<button class="btn btn-primary" onclick="openModal()">
<span>➕</span> 添加学生
</button>
<button class="btn btn-secondary" onclick="exportData()">
<span>📥</span> 导出数据
</button>
</div>
<!-- 表格容器 -->
<div class="table-container">
<table id="studentTable">
<thead>
<tr>
<th>头像</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
<th>班级</th>
<th>联系电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="studentTableBody">
<!-- 动态生成的学生数据 -->
</tbody>
</table>
<div id="emptyState" class="empty-state" style="display: none;">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<p>暂无学生数据</p>
<p>点击"添加学生"按钮开始录入</p>
</div>
</div>
</main>
<!-- 添加/编辑学生模态框 -->
<div id="studentModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">添加学生</h2>
<span class="close" onclick="closeModal()">×</span>
</div>
<form id="studentForm">
<div class="form-group">
<label for="studentId">学号</label>
<input type="text" id="studentId" required>
</div>
<div class="form-group">
<label for="studentName">姓名</label>
<input type="text" id="studentName" required>
</div>
<div class="form-group">
<label for="studentGender">性别</label>
<select id="studentGender" required>
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label for="studentAge">年龄</label>
<input type="number" id="studentAge" min="16" max="30" required>
</div>
<div class="form-group">
<label for="studentMajor">专业</label>
<input type="text" id="studentMajor" required>
</div>
<div class="form-group">
<label for="studentClass">班级</label>
<input type="text" id="studentClass" required>
</div>
<div class="form-group">
<label for="studentPhone">联系电话</label>
<input type="tel" id="studentPhone" pattern="[0-9]{11}" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
<script>
// 学生数据存储
let students = [
{
id: '2025001',
name: '张三',
gender: '男',
age: 20,
major: '计算机科学与技术',
class: '计科2001',
phone: '13812345678',
avatar: 'https://picsum.photos/seed/student1/100/100.jpg'
},
{
id: '2025002',
name: '李四',
gender: '女',
age: 19,
major: '软件工程',
class: '软工2001',
phone: '13987654321',
avatar: 'https://picsum.photos/seed/student2/100/100.jpg'
},
{
id: '2025003',
name: '王五',
gender: '男',
age: 21,
major: '数据科学',
class: '数据2001',
phone: '13666666666',
avatar: 'https://picsum.photos/seed/student3/100/100.jpg'
}
];
let editingIndex = -1;
// 初始化
document.addEventListener('DOMContentLoaded', function() {
renderTable();
updateStats();
// 搜索功能
document.getElementById('searchInput').addEventListener('input', function(e) {
filterStudents(e.target.value);
});
// 表单提交
document.getElementById('studentForm').addEventListener('submit', function(e) {
e.preventDefault();
saveStudent();
});
});
// 渲染表格
function renderTable() {
const tbody = document.getElementById('studentTableBody');
const emptyState = document.getElementById('emptyState');
if (students.length === 0) {
tbody.innerHTML = '';
emptyState.style.display = 'block';
return;
}
emptyState.style.display = 'none';
tbody.innerHTML = students.map((student, index) => `
<tr>
<td><img src="${student.avatar}" alt="${student.name}" class="avatar"></td>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.gender}</td>
<td>${student.age}</td>
<td>${student.major}</td>
<td>${student.class}</td>
<td>${student.phone}</td>
<td>
<div class="actions">
<button class="btn btn-secondary btn-sm" onclick="editStudent(${index})">
✏️ 编辑
</button>
<button class="btn btn-danger btn-sm" onclick="deleteStudent(${index})">
🗑️ 删除
</button>
</div>
</td>
</tr>
`).join('');
}
// 更新统计信息
function updateStats() {
document.getElementById('totalStudents').textContent = students.length;
document.getElementById('maleStudents').textContent = students.filter(s => s.gender === '男').length;
document.getElementById('femaleStudents').textContent = students.filter(s => s.gender === '女').length;
const avgAge = students.length > 0
? (students.reduce((sum, s) => sum + s.age, 0) / students.length).toFixed(1)
: 0;
document.getElementById('avgAge').textContent = avgAge;
}
// 搜索过滤
function filterStudents(searchTerm) {
const filtered = students.filter(student =>
student.name.includes(searchTerm) ||
student.id.includes(searchTerm) ||
student.major.includes(searchTerm)
);
const tbody = document.getElementById('studentTableBody');
if (filtered.length === 0) {
tbody.innerHTML = `
<tr>
<td colspan="9" style="text-align: center; padding: 40px; color: #999;">
没有找到匹配的学生
</td>
</tr>
`;
return;
}
tbody.innerHTML = filtered.map((student, index) => {
const originalIndex = students.indexOf(student);
return `
<tr>
<td><img src="${student.avatar}" alt="${student.name}" class="avatar"></td>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.gender}</td>
<td>${student.age}</td>
<td>${student.major}</td>
<td>${student.class}</td>
<td>${student.phone}</td>
<td>
<div class="actions">
<button class="btn btn-secondary btn-sm" onclick="editStudent(${originalIndex})">
✏️ 编辑
</button>
<button class="btn btn-danger btn-sm" onclick="deleteStudent(${originalIndex})">
🗑️ 删除
</button>
</div>
</td>
</tr>
`;
}).join('');
}
// 打开模态框
function openModal() {
document.getElementById('modalTitle').textContent = '添加学生';
document.getElementById('studentForm').reset();
editingIndex = -1;
document.getElementById('studentModal').style.display = 'block';
}
// 关闭模态框
function closeModal() {
document.getElementById('studentModal').style.display = 'none';
}
// 编辑学生
function editStudent(index) {
const student = students[index];
editingIndex = index;
document.getElementById('modalTitle').textContent = '编辑学生';
document.getElementById('studentId').value = student.id;
document.getElementById('studentName').value = student.name;
document.getElementById('studentGender').value = student.gender;
document.getElementById('studentAge').value = student.age;
document.getElementById('studentMajor').value = student.major;
document.getElementById('studentClass').value = student.class;
document.getElementById('studentPhone').value = student.phone;
document.getElementById('studentModal').style.display = 'block';
}
// 保存学生
function saveStudent() {
const studentData = {
id: document.getElementById('studentId').value,
name: document.getElementById('studentName').value,
gender: document.getElementById('studentGender').value,
age: parseInt(document.getElementById('studentAge').value),
major: document.getElementById('studentMajor').value,
class: document.getElementById('studentClass').value,
phone: document.getElementById('studentPhone').value,
avatar: `https://picsum.photos/seed/${Date.now()}/100/100.jpg`
};
// 检查学号是否重复（编辑时排除自己）
const existingIndex = students.findIndex(s => s.id === studentData.id && s !== students[editingIndex]);
if (existingIndex !== -1) {
alert('学号已存在！');
return;
}
if (editingIndex === -1) {
// 添加新学生
students.push(studentData);
} else {
// 编辑现有学生
students[editingIndex] = studentData;
}
renderTable();
updateStats();
closeModal();
// 显示成功提示
showNotification(editingIndex === -1 ? '学生添加成功！' : '学生信息更新成功！');
}
// 删除学生
function deleteStudent(index) {
if (confirm('确定要删除这个学生吗？')) {
students.splice(index, 1);
renderTable();
updateStats();
showNotification('学生删除成功！');
}
}
// 导出数据
function exportData() {
if (students.length === 0) {
showNotification('没有数据可以导出！', 'warning');
return;
}
const csvContent = "data:text/csv;charset=utf-8,"
+ "学号,姓名,性别,年龄,专业,班级,联系电话\n"
+ students.map(s => `${s.id},${s.name},${s.gender},${s.age},${s.major},${s.class},${s.phone}`).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "学生信息表.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showNotification('数据导出成功！');
}
// 显示通知
function showNotification(message, type = 'success') {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background: ${type === 'success' ? '#4caf50' : '#ff9800'};
color: white;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 2000;
animation: slideInRight 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOutRight 0.3s ease';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// 点击模态框外部关闭
window.onclick = function(event) {
const modal = document.getElementById('studentModal');
if (event.target === modal) {
closeModal();
}
}
// 添加动画样式
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
这个学生信息管理网页具有以下特点：
功能特性：
- 数据展示 - 以表格形式展示学生信息，包含头像、学号、姓名等完整信息
- 添加学生 - 通过模态框表单添加新学生，包含表单验证
- 编辑学生 - 点击编辑按钮可修改学生信息
- 删除学生 - 带确认提示的删除功能
- 搜索功能 - 实时搜索学生姓名、学号或专业
- 数据统计 - 显示总学生数、男女比例、平均年龄等统计信息
- 数据导出 - 支持将数据导出为CSV文件
设计特点：
- 现代UI设计 - 使用渐变色、圆角、阴影等现代设计元素
- 响应式布局 - 适配不同屏幕尺寸
- 交互反馈 - 悬停效果、点击动画、操作提示
- 空状态处理 - 无数据时显示友好提示
- 表单验证 - 必填字段验证、学号重复检查、手机号格式验证
用户体验：
（图片来源网络，侵删）
- 操作流畅 - 所有交互都有平滑过渡动画
- 即时反馈 - 操作成功后显示通知提示
- 数据持久化 - 在当前会话中保持数据状态
- 防误操作 - 删除前需要确认
页面已预置了3条示例数据,您可以直接体验所有功能，整个页面完全独立，无需外部依赖，可直接保存为HTML文件使用。
（图片来源网络，侵删）
