效果图：

实现代码：

<!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. web必知，多终端适配

    导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...

  2. 【leetcode】797. All Paths From Source to Target

    Given a directed acyclic graph (DAG) of n nodes labeled from 0 to n - 1, find all possible paths fro ...

  3. 【leetocde】922. Sort Array By Parity II

    Given an array of integers nums, half of the integers in nums are odd, and the other half are even.  ...

  4. 单链表的模板类(C++)

    /*header.h*/#pragma once #include<iostream> using namespace std; template<class T> struc ...

  5. final&static

    final 1.final修饰类,那么该类不能有子类,那么也就没有子类重写父类的方法,也就没有多态 2.final修饰成员变量,那么成员变量要么显式赋值(用第一种),要么在构造方法中赋值 无论哪一种, ...

  6. 【Python】【Module】hashlib

    用于加密相关的操作,代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法 import hashlib # ######## ...

  7. Spring Cloud中，如何解决Feign整合Hystrix第一次请求失败的问题

    Spring Cloud中,Feign和Ribbon在整合了Hystrix后,可能会出现首次调用失败的问题,要如何解决该问题呢? 造成该问题的原因 Hystrix默认的超时时间是1秒,如果超过这个时间 ...

  8. java 对 final 关键字 深度理解

    基础理解 : 1.修饰类 当用final去修饰一个类的时候,表示这个类不能被继承.处于安全,在JDK中,被设计为final类的有String.System等,这些类不能被继承 .注意:被修饰的类的成员 ...

  9. C++STL标准库学习笔记（一）sort

    前言: 近来在学习STL标准库,做一份笔记并整理好,方便自己梳理知识.以后查找,也方便他人学习,两全其美,快哉快哉! 这里我会以中国大学慕课上北京大学郭炜老师的<程序设计与算法(一)C语言程序设 ...

  10. 软件开发生命周期(SDLC)

    一.简介 软件开发生命周期又叫做 SDLC(Software Development Life Cycle),它是集合了计划.开发.测试和部署过程的集合.如下图所示 : 二.五个阶段 1.分析阶段: ...