简单学生管理系统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 ...
随机推荐
- 一起手写吧！ES5和ES6的继承机制！
原型 执行代码var o = new Object(); 此时o对象内部会存储一个指针,这个指针指向了Object.prototype,当执行o.toString()等方法(或访问其他属性)时,o会首 ...
- git pull、git fetch、git merge、git rebase的区别
一.git pull与git fetch区别 1.两者的区别 两者都是更新远程仓库代码到本地. git fetch相当于是从远程获取最新版本到本地,不会自动merge. 只是将远程仓库最新 ...
- C++一元多项式求导
这个题难度不大但是坑有点多,要考虑的点有几个: 1.测试用例为x 0 这个直接输出 0 0即可. 2.注意空格的输出 3.测试点3我好几次都没过,最后参考了别的答案加以修改才通过. 测试点3没过的代码 ...
- 'this' pointer in C++
The 'this' pointer is passed as a hidden argument to all nonstatic member function calls and is avai ...
- 【Linux】【Services】【SaaS】Docker+kubernetes（12. 部署prometheus/grafana/Influxdb实现监控）
1.简介 1.1. 官方网站: promethos:https://prometheus.io/ grafana:https://grafana.com/ 1.2. 架构图 2. 环境 2.1. 机器 ...
- 时间同步之pxe，cobbler,dhcp
ntpdate 时间同步 同步方法 ntpdate ntp服务器IP 例: ntpdate 192.168.37.11 自动运行同步时间脚本 crontab -e * */1 * * * /usr/s ...
- 【Spring Framework】Spring 入门教程（一）控制反转和依赖注入
参考资料 Spring 教程 说在前面 什么样的架构,我们认为是一个优秀的架构? 判断准则:可维护性好,可扩展性好,性能. 什么叫可扩展性好? 答:在不断添加新的代码的同时,可以不修改原有代码,即符合 ...
- Spring中基于注解方式管理bean
操作步骤 第一步:导入相关jar包 spring IoC的基本包 Spring支持注解的Jar包 第二步:创建Spring配置文件,ApplicationContext.xml 引入约束和开启注解扫描 ...
- DIgSILENT PowerFactory 15.1.7 破解过程
将dll文件复制到安装路径下:
- Table.FirstN保留前面N….First…（Power Query 之 M 语言）
数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...