简单学生管理系统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 ...
随机推荐
- OC简单介绍
一.OC与C的对比 关键字 OC新增的关键字在使用时,注意部分关键字以"@"开头 方法->函数 定义与实现 数据类型 新增:BOOL/NSObject/id/SEL/bloc ...
- App内容分享
1.发送文本内容 发送简单的数据到其他应用,比如社交分分享的内容,意图允许用户快速而方便的共享信息. //分享简单的文本内容 public void btnShareText(View view) { ...
- 【Linux】【Shell】【Basic】条件测试
1. 数值测试:数值比较 -eq:是否等于: [ $num1 -eq $num2 ] -ne:是否不等于: -gt:是否大于: -ge:是否大于等于: -lt:是否小于: -le:是否小于等于: 2. ...
- 开源低代码开发平台entfrm2.1.0更新
开源低代码开发平台entfrm2.1.0更新 新功能 代码生成支持主子表,支持预览: 新增多应用顶部菜单与左侧菜单联动: element-ui升级到2.15.1: 新增表单管理,集成avue-from ...
- 1.Vuejs-第一个实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 关于python中显存回收的问题
技术背景 笔者在执行一个Jax的任务中,又发现了一个奇怪的问题,就是明明只分配了很小的矩阵空间,但是在多次的任务执行之后,显存突然就爆了.而且此时已经按照Jax的官方说明配置了XLA_PYTHON_C ...
- 攻击科普：DDos
目录 一.DDoS 攻击究竟是什么? 二.DDoS 攻击多少G是什么意思? 二.DDoS攻击种类 ICMP Flood UDP Flood NTP Flood SYN Flood CC攻击 DNS Q ...
- 【dva】model中effects函数的解析
结构 effects: { *pageQuery({ payload = {} }, { select, call, put }) { const res = yield call(pageQuery ...
- 【分布式技术专题】「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南
Minio的元数据 数据存储 MinIO对象存储系统没有元数据数据库,所有的操作都是对象级别的粒度的,这种做法的优势是: 个别对象的失效,不会溢出为更大级别的系统失效. 便于实现"强一致性& ...
- LuoguB2044 有一门课不及格的学生 题解
Content 给出一名学生的语数英三门成绩,请判断该名学生是否恰好有一门不及格(成绩小于 \(60\) 分). 数据范围:成绩在 \(0\sim 100\) 之间. Solution 强烈建议先去做 ...