<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>补习班管理系统</title>
<style>
* {
margin
: 0;
padding
: 0;
box
-sizing
: border
-box;
font
-family
: 'Segoe UI', 'Microsoft YaHei', sans
-serif;
}
:root {
--primary
-color: #4361ee;
--secondary
-color: #3f37c9;
--accent-color: #4895ef;
--success
-color: #4cc9f0;
--light
-color: #f8f9fa;
--dark
-color: #212529;
--gray
-color: #6c757d;
--shadow
: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition
: all 0.3s ease;
}
body {
background
-color: #f0f2f5;
color: var(
--dark
-color);
line
-height
: 1.6;
}
.cont
ainer {
max
-width
: 1200px;
margin
: 0 auto;
padding
: 20px;
}
header {
background
: linear
-gradient(135deg, var(
--primary
-color), var(
--secondary
-color));
color: white;
padding
: 25px 0;
text-align
: center;
border
-radius
: 10px;
margin
-bottom
: 30px;
box
-shadow
: var(
--shadow);
position
: relative;
overflow
: hidden;
}
header
::before {
content
: '';
position
: absolute;
top
: -50%;
left
: -50%;
width
: 200%;
height
: 200%;
background
: radial
-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background
-size
: 20px 20px;
animation
: move 15s linear infinite;
}
@keyframes move {
0% {
transform
: translate(0, 0);
}
100% {
transform
: translate(20px, 20px);
}
}
header h1 {
position
: relative;
z
-index
: 1;
font
-size
: 2.5rem;
font
-weight
: 700;
margin
-bottom
: 10px;
}
nav {
background
-color: white;
border
-radius
: 10px;
box
-shadow
: var(
--shadow);
margin
-bottom
: 30px;
overflow
: hidden;
}
.nav
-links {
display
: flex;
list
-style
: none;
padding
: 0 10px;
flex
-wrap
: wrap;
}
.nav
-links li {
padding
: 0;
position
: relative;
}
.nav
-links li a {
text-decoration
: none;
color: var(
--dark
-color);
font
-weight
: 500;
padding
: 18px 25px;
display
: block;
transition
: var(
--transition);
position
: relative;
z
-index
: 1;
}
.nav
-links li a
:hover {
color: white;
}
.nav
-links li
::after {
content
: '';
position
: absolute;
bottom
: 0;
left
: 0;
width
: 100%;
height
: 0;
background
: linear
-gradient(135deg, var(
--primary
-color), var(
--accent-color));
transition
: var(
--transition);
z
-index
: 0;
}
.nav
-links li
:hover
::after {
height
: 100%;
}
.nav
-links li.
active a {
color: white;
}
.nav
-links li.
active::after {
height
: 100%;
}
.content {
background
-color: white;
border
-radius
: 10px;
box
-shadow
: var(
--shadow);
padding
: 30px;
min
-height
: 500px;
position
: relative;
overflow
: hidden;
}
.content
::before {
content
: '';
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 5px;
background
: linear
-gradient(90deg, var(
--primary
-color), var(
--accent-color), var(
--success
-color));
}
.content h2 {
color: var(
--primary
-color);
margin
-bottom
: 20px;
font
-size
: 1.8rem;
font
-weight
: 600;
position
: relative;
padding
-bottom
: 10px;
}
.content h2
::after {
content
: '';
position
: absolute;
left
: 0;
bottom
: 0;
width
: 60px;
height
: 3px;
background
-color: var(
--accent-color);
}
.content p {
color: var(
--gray
-color);
margin
-bottom
: 30px;
font
-size
: 1.1rem;
}
.dashboard
-cards {
display
: grid;
grid
-template
-columns
: repeat(auto
-fill, minmax(280px, 1fr));
gap
: 25px;
margin
-top
: 30px;
}
.card {
background
-color: white;
border
-radius
: 10px;
box
-shadow
: var(
--shadow);
padding
: 25px;
transition
: var(
--transition);
position
: relative;
overflow
: hidden;
border
: 1px solid rgba(0,0,0,0.05);
}
.card
:hover {
transform
: translateY(
-10px);
box
-shadow
: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.card
::before {
content
: '';
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 5px;
background
: linear
-gradient(90deg, var(
--primary
-color), var(
--accent-color));
}
.card h3 {
color: var(
--primary
-color);
margin
-bottom
: 15px;
font
-size
: 1.4rem;
display
: flex;
align
-items
: center;
}
.card h3
::before {
content
: '📚';
margin
-right
: 10px;
font
-size
: 1.6rem;
}
.card p {
color: var(
--gray
-color);
margin
-bottom
: 20px;
font
-size
: 1rem;
line
-height
: 1.5;
}
.card a {
display
: inline
-block;
background
: linear
-gradient(135deg, var(
--primary
-color), var(
--secondary
-color));
color: white;
padding
: 10px 20px;
border
-radius
: 5px;
text-decoration
: none;
transition
: var(
--transition);
font
-weight
: 500;
box
-shadow
: 0 2px 5px rgba(0, 0, 0, 0.1);
position
: relative;
overflow
: hidden;
}
.card a
::before {
content
: '';
position
: absolute;
top
: 0;
left
: -100%;
width
: 100%;
height
: 100%;
background
: rgba(255, 255, 255, 0.2);
transition
: var(
--transition);
}
.card a
:hover
::before {
left
: 100%;
}
.card a
:hover {
transform
: translateY(
-3px);
box
-shadow
: 0 4px 8px rgba(0, 0, 0, 0.15);
}
footer {
text-align
: center;
margin
-top
: 30px;
color: var(
--gray
-color);
padding
: 20px 0;
background
-color: white;
border
-radius
: 10px;
box
-shadow
: var(
--shadow);
}
footer p {
margin
: 0;
}
/* 响应式设计 */
@media (max
-width
: 768px) {
.nav
-links {
flex
-direction
: column;
}
.nav
-links li a {
padding
: 15px 20px;
text-align
: center;
}
.dashboard
-cards {
grid
-template
-columns
: 1fr;
}
header h1 {
font
-size
: 2rem;
}
}
</style>
</head>
<body>
<div class="cont
ainer">
<header>
<h1>补习班管理系统</h1>
</header>
<nav>
<ul class="nav
-links">
<li class="
active"><a href="school_management.html">首页</a></li>
<li><a href="students.html">学生管理</a></li>
<li><a href="courses.html">课程管理</a></li>
<li><a href="class_schedule.html">班级安排</a></li>
<li><a href="lunch.html">午餐管理</a></li>
</ul>
</nav>
<div class="content">
<h2>欢迎使用补习班管理系统</h2>
<p>请使用导航栏选择需要的功能模块，高效管理您的补习班日常运营。</p>
<div class="dashboard
-cards">
<div class="card">
<h3>学生管理</h3>
<p>添加、修改和删除学生信息，维护完整的学生档案</p>
<a href="students.html">进入</a>
</div>
<div class="card">
<h3>课程管理</h3>
<p>管理课程信息和安排，为学生分配合适的课程</p>
<a href="courses.html">进入</a>
</div>
<div class="card">
<h3>班级安排</h3>
<p>管理班级和学生的课程分配，查看详细课程表</p>
<a href="class_schedule.html">进入</a>
</div>
<div class="card">
<h3>午餐管理</h3>
<p>管理学生午餐情况，统计午餐人数</p>
<a href="lunch.html">进入</a>
</div>
</div>
</div>
<footer>
<p>© 2023 补习班管理系统
- 版权所有</p>
</footer>
</div>
</body>
</html>
超级会员免费看
订阅专栏 解锁全文
扫一扫
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
