简单学生管理系统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 ...
随机推荐
- 【区间dp】- P1880 [NOI1995] 石子合并
记录一下第一道ac的区间dp 题目:P1880 [NOI1995] 石子合并 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 代码: #include <iostream> ...
- C++11的auto自动推导类型
auto是C++11的类型推导关键字,很强大 例程看一下它的用法 #include<vector> #include<algorithm> #include<functi ...
- OC-copy，单例
总结 编号 主题 内容 一 NSFileManager NSFileManager介绍/用法(常见的判断)/文件访问/文件操作 二 集合对象的内存管理 集合对象的内存管理/内存管理总结 三 *copy ...
- Zookeeper的选举算法和脑裂问题
ZK介绍 ZK = zookeeper ZK是微服务解决方案中拥有服务注册发现最为核心的环境,是微服务的基石.作为服务注册发现模块,并不是只有ZK一种产品,目前得到行业认可的还有:Eureka.Con ...
- 通过Jedis操作Redis
package com.yh; import org.junit.After; import org.junit.Before; import org.junit.Test; import redis ...
- 【C/C++】习题3-3 数数字/算法竞赛入门经典/数组和字符串
[题目] 把前n个(n<=10000)的整数顺序写在一起:123456789101112-- 数一数0~9各出现多少次(输出10个整数,分别是0,1,2,--,9出现的次数) [解答] 暴力求解 ...
- Windows下搭建FFmpeg开发调试环境
背景 如果你是一个FFmpeg的使用者,那么绝大部分情况下只需要在你的程序中引用FFmpeg的libav*相关的头文件,然后在编译阶段链接相关的库即可. 但是如果你想调试FFmpeg内部相关的逻辑,或 ...
- CF190C STL 题解
* 题意 :给出只会出现 pair 和 int 的字符串 , 要求按照给出 pair 和 int 的顺序 , 添加 ' < ' , ' > ' , ' , ' 这三个符号 , ...
- centos7部署mysql-5.7
目录 一.环境声明 二.程序部署 三.更改初始密码 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql ...
- 使用 Nocalhost 开发 Kubernetes 中的 APISIX Ingress Controller
本文作者:黄鑫鑫 - Nocalhost 项目核心开发者 腾讯云 CODING DevOps 研发工程师.硕士毕业于中山大学数据科学与计算机学院,曾负责过平安云主机及国家超算中心容器云平台等相关业务, ...