简单学生管理系统HTML前端页面

 !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 

 th 序号 /th 

 th 姓名 /th 

 th 密码 /th 

 th 昵称 /th 

 th 年龄 /th 

 th 操作 /th 

 /tr 

 /thead 

 tbody 

 td 1 /td 

 td 杨明金 /td 

 td admin /td 

 td 明金同学 /td 

 td 20 /td 

 td a href # 删除 /a a href # 修改 /a /td 

 /tr 

 td 2 /td 

 td 杨明金 /td 

 td admin /td 

 td 明金同学 /td 

 td 20 /td 

 td a href # 删除 /a a href # 修改 /a /td 

 /tr 

 td 3 /td 

 td 杨明金 /td 

 td admin /td 

 td 明金同学 /td 

 td 20 /td 

 td a href # 删除 /a a href # 修改 /a /td 

 /tr 

 td 4 /td 

 td 杨明金 /td 

 td admin /td 

 td 明金同学 /td 

 td 20 /td 

 td a href # 删除 /a a href # 修改 /a /td 

 /tr 

 td 5 /td 

 td 杨明金 /td 

 td admin /td 

 td 明金同学 /td 

 td 20 /td 

 td a href # 删除 /a a href # 修改 /a /td 

 /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 

 copy;互联网技术学院19计网二班版权所有

 /div 

 /div 

 /body 

 /html