效果图：

实现代码：

<!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. 轻松理解webpack热更新原理

    一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...

  2. windows Visual Studio 上安装 CUDA【转载】

    原文 : http://blog.csdn.net/augusdi/article/details/12527497  前提安装: Visual Studio 2012 Visual Assist X ...

  3. Linux基础命令---smbpasswd管理samba密码

    smbpasswd smbpasswd指令可以用来修改samba用户的的密码,该指令不仅可以修改本地samba服务器的用户密码,还可以修改远程samba服务器的用户密码. 此命令的适用范围:RedHa ...

  4. list通过比较器进行排序

    Collections.sort(dataList,new Comparator<BaseTransitData>(){            public int compare(Bas ...

  5. 【Linux】【Services】【Web】Nginx基础

    1. 概念 1.1. 消息通知机制:同步synchronous,异步asynchronous 同步:等待对方返回信息 异步:被调用者通过状态.通知或回调通知调用者 状态:调用者每隔一段时间就需要检查一 ...

  6. 错误: 找不到或无法加载主类(IDEA中启动spring boot项目)

    版权声明:本文为博主原创文章,如果转载请给出原文链接:http://www.jufanshare.com/content/142.html 提示:需要对IDEA编辑工具使用熟悉 出现一个问题,就是sp ...

  7. Tableau如何使用 度量值和度量名称

    一.把子类别拖拽至列 二.度量值拖拽至行 三.度量名称拖拽至筛选器,右键-编辑筛选器-选择销售额和利润 四.度量名称拖拽是标记选择颜色-其它细节调整-最终结果如下所示

  8. 安装xampp开发环境更改默认项目路径

    xampp开发环境中默认的项目路径在xampp下的htdocs文件下 如果想修改默认项目的位置步骤如下: 1)D:\xampp\apache\conf 找到httpd.conf打开 2)找到 Docu ...

  9. RocketMQ源码详解 | Broker篇 · 其五：高可用之主从架构

    概述 对于一个消息中间件来讲,高可用功能是极其重要的,RocketMQ 当然也具有其对应的高可用方案. 在 RocketMQ 中,有主从架构和 Dledger 两种高可用方案: 第一种通过主 Brok ...

  10. [BUUCTF]REVERSE——firmware

    firmware 附件 步骤: 检查文件没有看出什么,ida载入一堆乱码,看了其他师傅的wp才知道要先binwalk对文件进行提取 120200.squashfs这是一个linux的压缩文件 我们需要 ...