简单学生管理系统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>
<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>
简单学生管理系统HTML前端页面的更多相关文章
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- jdbc简单学生管理系统
这个是java连接mysql数据库的一个简单学生系统,通过jdbc连接数据库. 工具类 JDBCuntils. package Student; import java.io.IOException; ...
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ab ...
- javaee三层架构案例--简单学生管理系统
背景 学了jdbc.jsp等需要串起来,不然会忘记 项目环境 win10 jdk11 mysql8.0.13 jar包 c3p0-0.9.5.2 commons-dbutils-1.7 jstl mc ...
- C++实现简单学生管理系统
在网上看到的一个C++的小项目,我自己码了一遍,然后记录下我的理解以及像我这种菜鸟在整个过程中产生的问题. 我将我知道的尽可能详细的写下来,如有错误请联系我哈,QQ:920209178. 原文地址:h ...
- php实现简单的学生管理系统
php实现学生管理系统 一.效果 二.代码框架 functions文件夹里面是封装的mysqli的数据库操作函数和一个跳转的函数 student文件夹里面就是学生管理系统的主界面 applicatio ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- 用Springboot+Jpa实现学生CRUD操作（含前端页面，含分页，自定义SQL）
前期准备 使用idea新建个SpringBoot项目 参考博客:https://blog.csdn.net/Mr_Jixian/article/details/89742366?tdsourcetag ...
- C++ 实现简单命令行学生管理系统
C++ 实现简单命令行学生管理系统 预览: 编译环境是macOS.system("clear") 在windows下请换成 system("cls") #inc ...
随机推荐
- linux允许直接以root身份ssh登录
1. sudo su - 2. vim /etc/ssh/sshd_config 3. let "PermitRootLogin" equal yes 4. :wq 5. serv ...
- Linux 设置时区
一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 A命令 : "tzselect" 方法 ...
- Output of C++ Program | Set 6
Predict the output of below C++ programs. Question 1 1 #include<iostream> 2 3 using namespace ...
- implicit declaration of function 'NSFileTypeForHFSTypeCode' is invalid in c99
问题:implicit declaration of function 'NSFileTypeForHFSTypeCode' is invalid in c99 解决办法: 在出现该问题的函数前后加上 ...
- Objective-C运行时定义了几种重要的类型
Objective-C运行时定义了几种重要的类型. Class:定义Objective-C类 Ivar:定义对象的实例变量,包括类型和名字. Protocol:定义正式协议. objc_propert ...
- Shell脚本实现乱序排列文件内容的多种方法（洗牌问题）
洗牌问题:洗一副扑克,有什么好办法?既能洗得均匀,又能洗得快?即相对于一个文件来说怎样高效率的实现乱序排列? ChinaUnix 确实是 Shell 高手云集的地方,只要你想得到的问题,到那里基本上都 ...
- Linux 文件权限、系统优化
目录 Linux 文件权限.系统优化 1.文件权限的详细操作 1.简介: 2.命令及归属: 3.权限对于用户和目录的意义 权限对于用户的意义: 权限对于目录的意义: 4.创建文件/文件夹的默认权限来源 ...
- 扬我国威，来自清华的开源项目火爆Github
前几天TJ君跟大家分享了几个有趣的Github项目(加密解密.食谱.新冠序列,各种有趣的开源项目Github上都有),其中呢,有不少是来自斯坦福大学的项目,当时TJ君就不由得想,什么时候能看到的项目都 ...
- 设置项目的日程排定方式（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 [项目]>[属性]>[项目信息]>[日程排定方法]>选取: 默认项是[项目开始日期]. 这两位是干 ...
- WebRTC与音频音量
WebRTC打开麦克风,获取音频,在网页上显示音量. 播放示例音频 先从播放音频入手.准备一个现成的音频文件. 界面上放一个audio元素,提前准备好一个音频文件,路径填入src <audio ...