效果图：

实现代码：

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

 

# css # html
Logo
欢迎使用若依开源

快速构建 Web 应用程序

更多推荐

深入 Composer autoload

这几天看到 phphub 上面有人开始进坑怒看 laravel 源代码，于是我也凑个热闹来看下这个故事。众所周知 composer 是现代PHP 项目的基石， 与古老的 pear 不同， composer 并不是一款专注于系统级别php 管理的包管理系统，而是基于项目的一个库管理系统。这就好比 npminstall -g 和 npminstall 的区别。而且最主要

avatar RuoYi 若依

实体类（VO，DO，DTO）的划分

经常会接触到VO，DO，DTO的概念，本文从领域建模中的实体划分和项目中的实际应用情况两个角度，对这几个概念进行简析。得出的主要结论是：在项目应用中，VO对应于页面上需要显示的数据（表单），DO对应于数据库中存储的数据（数据表），DTO对应于除二者之外需要进行传递的数据。一、实体类百度百科中对于实体类的定义如下：实体类的主要职责是存储和管理系统内部的信息，它也可以有行为，甚至很复杂的行为，但这些行

avatar RuoYi 若依

计算机课如何断开学生端,极域课堂管理系统怎么连接老师 学生端连接问题解决方法...

现在的大学课堂都紧跟着时代的步伐，选择用电子教室代替传统的教室，电子教室的好处就是可以让坐在角落的同学也能清楚的看到老师的每一个操作，除此之外还可以电子举手，提交作业获得老师的及时反馈，学习效率倍增。如果你发现自己的电脑出现连接不上电脑的情况的，来看看小编是怎么解决的把！类别：教育管理 大小：16.38M 语言：简体中文评分：61、首先，正常的学生机器是开机就会自动的连接老师端的，如果...

avatar RuoYi 若依