简单学生管理系统HTML前端页面
原创
©著作权归作者所有：来自51CTO博客作者明金同学的原创作品，请联系作者获取转载授权，否则将追究法律责任
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学生管理系统</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 1rem;
}
body{
background: url(img/top_bg.png);
background-repeat: repeat;
background-position: right;
}
#container{
padding: 10px;
margin: 0 auto;
width: 80%;
height: 100%;
}
.top{
background-image: url(img/top_left.gif);
color: white;
padding: 10px;
font-size: 1.25rem;
font-weight: bold;
}
.nav{
background-image: url(./img/navigation.png);
padding: 1.25rem;
}
.conter{
padding: 20px 7%;
background-color: beige;
}
.conter_up{
text-decoration: none;
color: #9292ee;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.2rem;
padding-bottom: 20px;
}
.conter_middle table{
border: 1px solid ;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.1rem;
border: 2px solid black;
}
.conter_middle td,th{
border: 1px solid #6e6767;
height: 45px;
}
.conter_middle a{
text-decoration: none;
font-weight: bold;
}
.conter_down{
display: flex;
justify-content: flex-end;
padding: 20px;
}
.conter_down>*{
margin-right: 8px;
}
.foot{
background-image: url(img/footer_bg.gif);
padding: 20px;
color: white;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div id="container">
<div class="top">
欢迎进入学生管理信息平台
</div>
<div class="nav">
<img src="img/index_out.png" >
<img src="img/admin_out.png" >
<img src="img/fee_out.png" >
<img src="img/role_out.png" >
</div>
<div class="conter">
<div class="conter_up">
学员信息列表
</div>
<div class="conter_middle">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>昵称</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
<tr>
<td>3</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
<tr>
<td>4</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
<tr>
<td>5</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
<tr>
<td>6</td>
<td>杨明金</td>
<td>admin</td>
<td>明金同学</td>
<td>20</td>
<td><a href="#">删除</a> <a href="#">修改</a></td>
</tr>
</tbody>
</table>
</div>
<div class="conter_down">
<span>共5页</span>
<input type="button" name="" id="" value="上一页" />
<select name="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" name="" id="" value="下一页" />
</div>
</div>
<div class="foot">
©互联网技术学院19计网二班版权所有
</div>
</div>
</body>
</html>
