效果图：

实现代码：

<!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">

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

			</div>

		</div>

	</body>

</html>

简单学生管理系统HTML前端页面的更多相关文章

  1. Java写一个简单学生管理系统

    其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...

  2. jdbc简单学生管理系统

    这个是java连接mysql数据库的一个简单学生系统,通过jdbc连接数据库. 工具类 JDBCuntils. package Student; import java.io.IOException; ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

    目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ab ...

  4. javaee三层架构案例--简单学生管理系统

    背景 学了jdbc.jsp等需要串起来,不然会忘记 项目环境 win10 jdk11 mysql8.0.13 jar包 c3p0-0.9.5.2 commons-dbutils-1.7 jstl mc ...

  5. C++实现简单学生管理系统

    在网上看到的一个C++的小项目,我自己码了一遍,然后记录下我的理解以及像我这种菜鸟在整个过程中产生的问题. 我将我知道的尽可能详细的写下来,如有错误请联系我哈,QQ:920209178. 原文地址:h ...

  6. php实现简单的学生管理系统

    php实现学生管理系统 一.效果 二.代码框架 functions文件夹里面是封装的mysqli的数据库操作函数和一个跳转的函数 student文件夹里面就是学生管理系统的主界面 applicatio ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  8. 用Springboot+Jpa实现学生CRUD操作（含前端页面，含分页，自定义SQL）

    前期准备 使用idea新建个SpringBoot项目 参考博客:https://blog.csdn.net/Mr_Jixian/article/details/89742366?tdsourcetag ...

  9. C++ 实现简单命令行学生管理系统

    C++ 实现简单命令行学生管理系统 预览: 编译环境是macOS.system("clear") 在windows下请换成 system("cls") #inc ...

随机推荐

  1. iOS 的文件操作

    直接上操作 效果:将一张图片写入文件 (图片本身已经在Assets.xcassets里面了) 1.获取当前app的沙盒路径 NSString *documentPath = NSSearchPathF ...

  2. Virtual functions in derived classes

    In C++, once a member function is declared as a virtual function in a base class, it becomes virtual ...

  3. SQL模糊查询语句和Escape转义字符

    通配符描述示例%包含零个或更多字符的任意字符串.WHERE title LIKE '%computer%' 将查找处于书名任意位置的包含单词 computer 的所有书名._(下划线)任何单个字符.W ...

  4. zabbix之监控面试

    先用shell脚本把值取出来,然后重启agent,在server端用zabbix-get命令测试一下,看能不能通过userparameter指定的可以将值取出来,如果没问题,在在网页创建模板,加监控项 ...

  5. 【C/C++】最大连续子序列和/动态规划

    思路主要是看了晴神的算法笔记,实现是自己重新用vector实现了一下,对付逗号隔开的输入 #include <iostream> #include <string> #incl ...

  6. EFK的安装和收集docker容器日志展示

    在用户根目录创建个filebeat.docker.yml文件,文件内容如下 filebeat.config: modules: path: ${path.config}/modules.d/*.yml ...

  7. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  8. C# 编写一个小巧快速的 Windows 动态桌面软件

    开源自己前段时间使用 C# 编写的 Windows 动态桌面软件,在接下来的博客我将描写一些技术细节和遇到的一些坑.这个软件可以把视频设置成桌面背景播放,不仅如此而且还可以把网页或一个网页文件设置成桌 ...

  9. Mybatis中原生DAO实现和Mapper动态代理实现

    Mybatis开发dao的方法通常用两种,一种是传统DAO的方法,另一种是基于mapper代理的方法. 一.传统DAO方式开发 1.sql语句映射文件编写 User.xml <?xml vers ...

  10. java对象与类

    1.设计一个用来描述汽车的类,使用类的非静态成员变量来表示汽车的车主姓名.当前的速率和当前方向盘的转向角度,使用类的非静态成员方法来表示改变汽车的速率和停车两个操作. 源代码: 1 package t ...