实验八
实验内容
网站会员和管理员的注册与登录
在网页中显示“会员登录”和“管理员登录”超链接
一、会员登录与注册
（1）设计会员数据表（名字自定，方便阅读与记忆）用于存放会员的信息，包含如下字段：①user_name，②user_psw，③phone_number，④real_name，⑤WeChat_name。
（2）点击 “会员登录”超链接，点击跳转到登录页面。
（3）在会员登录页面中设计表单，包含“用户名”和“密码”，除了登录以外，页面中还显示“免费注册”超链接。
（4）在会员登录页面，填写完用户名和密码以后，点击“登录”按钮，若用户名和密码在数据库服务器中有记录，则跳转到某主页（显示欢迎来到内蒙古大学电子信息工程学院），如没有，跳转到注册页面先注册。
（5）在会员登录页面，点击“免费注册”，跳转到注册页面，注册信息包含①用户名②密码③手机号④真实姓名⑤微信号。点击注册以后，将注册信息写入数据表，并且提示是否注册成功，若成功跳转到登录页面，若不成功重新跳转到注册页面。
二、管理员登录与注册
（1）设计管理员数据表（名字自定，方便阅读与记忆）用于存放会员的信息，包含如下字段：①admin_name，②admin_psw，③admin_phone_number，④admin_real_name，⑤admin_id_number，⑥department。
（2）点击 “管理员登录”超链接，点击跳转到管理员登录页面。
（3）在管理员登录页面中设计表单，包含“用户名”和“密码”，除了登录以外，页面中还显示“管理员注册”超链接。
（4）管理员注册方法与会员注册方法相同，注意管理员注册页面、管理员数据表和会员的不同。
（5）管理员登录时，使用SESSION验证。
（6）登录成功后，跳转到管理页面（包含iframe框架即可）。
实验过程
网站会员和管理员的注册与登录
源代码
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link href="css/style.css" rel="stylesheet" type="text/css" >
</head>
<body class="IndexBody">
<script color="34,58,212" opacity="0.5" count="199" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<table align="center" class="IndexTable">
<tr>
<td align="center">
<a href="login.html"><button type="button" class="IndexButton"><b>会员登录</b></button></a>
<a href="AdminLogin.html"><button type="button" class="IndexButton"><b>管理员登录</b></button></a>
</td>
</tr>
</table>
</body>
</html>login.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="LoginBody">
<script color="0,150,0" opacity="0.5" count="150" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<form action="login.php" method="post" name="login">
<div class="UserOutside">
<div class="UserInside">
<div id="h1User">
<h1>会员登入</h1>
</div>
<div class="UserText" id="PUserMane">
用户名：<input type="text" name="user_name"/>
</div>
<div class="UserText" id="PUserPsw">
密 码：<input type="password" name="user_psw">
</div>
<div class="UserButton" id="PUserButton">
<input type="submit" name="btn_submit" value="登 入" id="UserButton1"/>
<a href="Register.html"><input type="button" value="免费注册" id="UserButton2"/></a>
</div>
</div>
</div>
</form>
</body>
</html>login.php
<?php
//获取提交的信息
$user_name = $_POST['user_name'];
$user_psw = $_POST['user_psw'];
if($user_name == '') {echo "<script>window.location.href = 'login.html';alert('请输入用户名：')</script>";}
//选择MySQL数据库信息
$servername = "localhost";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {die("Connection failed: " . mysqli_connect_error());}
$select = "SELECT user_name,user_psw FROM vip_db";
$result = mysqli_query($conn, $select);
while($row = mysqli_fetch_assoc($result))
{
if ($user_name == $row["user_name"])
{
if ($user_psw == $row["user_psw"])
{
echo "<script>window.location.href = 'https://dzxy.imu.edu.cn/'</script>";
}
else {echo "<script>window.location.href = 'login.html';alert('密码输入错误！！！')</script>";}
}
}
echo "<script>window.location.href = 'Register.html';alert('此用户名未进行注册！！！')</script>";
//echo "用户名".$row["user_name"]."未进行注册！！！<br>请在免费注册进行注册<br>3s后跳转到注册页面";
//header("refresh:5;url=Register.html");
?>Register.html
<?php
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>会员注册</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function tijiao()
{
var user_name = document.getElementById("user_name").value;
var user_psw = document.getElementById("user_psw").value;
var phone_number = document.getElementById("phone_number").value;
var real_name = document.getElementById("real_name").value;
var WeChat = document.getElementById("WeChat").value;
if(user_name == ""){alert("用户名为空！！！");return false;}
else if(user_psw == ""){alert("密码为空！！！");return false;}
else if(phone_number == ""){alert("手机号为空！！！");return false;}
else if(real_name == ""){alert("真实姓名为空！！！");return false;}
else if(WeChat == ""){alert("微信号为空！！！");return false;}
else
{
alert("确认提交");
return true;
}
}
function chongxie() {alert("确认要重新填写")}
</script>
</head>
<body class="RegisterBody">
<script color="0,150,0" opacity="0.5" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<form name="forml" action="Register.php" method="post" onsubmit="return tijiao()" enctype="multipart/form-data">
<div align="center" class="UserRegisterOutside">
<div class="UserRegisterInside">
<h1>会员注册</h1>
</div>
<div class="UserRegisterInside">
<div class="UserRegisterText"><span><b>用户名：</b><input type="text" name="user_name" id="user_name"/></span></div>
<div class="UserRegisterText"><span><b>密 码：</b><input type="password" name="user_psw" id="user_psw"/></span></div>
<div class="UserRegisterText"><span><b>手机号：</b><input type="text" name="phone_number" id="phone_number"/></span></div>
<div class="UserRegisterText"><span><b>姓 名：</b><input type="text" name="real_name" id="real_name"/></span></div>
<div class="UserRegisterText"><span><b>微信号：</b><input type="text" name="WeChat" id="WeChat"/></span></div>
</div>
<div class="UserRegisterInside">
<div class="UserRegisterButton">
<input type="submit" name="btn_submit" value="提交"id="UserRegiserButton1"/>
<input type="reset" name="btn_reset" value="重填" onclick="chongxie()" id="UserRegiserButton2"/>
</div>
</div>
</div>
</form>
</body>
</html>Register.php
<?php
//选择MySQL数据库信息
$servername = "localhost";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {die("Connection failed: " . mysqli_connect_error());}
//获取提交的信息
$user_name = $_POST['user_name'];
$user_psw = $_POST['user_psw'];
$phone_number = $_POST['phone_number'];
$real_name = $_POST['real_name'];
$WeChat = $_POST['WeChat'];
$ET = 0;
//判断是否已经注册
$select = "SELECT user_name FROM vip_db";
$result = mysqli_query($conn, $select);
while($row = mysqli_fetch_assoc($result))
{
if ($user_name == $row["user_name"])
{
echo "会员：".$row["user_name"]."已经注册！！！<br>3s后返回登入页面";
$ET = 1;
header("refresh:5;url=login.html");
}
}
//写入数据库数据
if ($ET == 0)
{
$sql="INSERT INTO vip_db (user_name, user_psw, phone_number, real_name, WeChat)
VALUES ('$user_name', '$user_psw', '$phone_number', '$real_name', '$WeChat')";
//数据库反馈信息
if (mysqli_query($conn, $sql)) {
echo "会员注册成功！！！";
} else {echo "Error: " . $sql . "<br>" . mysqli_error($conn);}
}
//关闭数据库链接
mysqli_close($conn);
?>AdminLogin.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="AdminLoginBody">
<script color="99,99,99" opacity="0.5" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<form action="AdminLogin.php" method="post" name="login">
<div class="AdminOutside">
<div class="AdminInside">
<div id="h1Admin">
<h1>管理员登入</h1>
</div>
<div class="UserText">
用户名：<input type="text" name="admin_name"/>
</div>
<div class="UserText">
密 码：<input type="password" name="admin_psw">
</div>
<div class="AdminButton">
<input type="submit" name="btn_submit" value="登 入" id="AdminButton1"/>
<a href="AdminRegister.html"><input type="button" value="免费注册" id="AdminButton2"/></a>
</div>
</div>
</div>
</form>
</body>
</html>AdminLogin.php
<?php
//session验证防止未登录进入管理界面
$name = $_POST['admin_name'];
$psw = $_POST['admin_psw'];
if($name == '' && $psw == '') {echo "<script>window.location.href='AdminLogin.html';alert('请输入用户名：')</script>";}
session_start();
$_SESSION['name'] = $name;
//选择MySQL数据库信息
$servername = "localhost";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//获取提交的信息
$admin_name = $_POST['admin_name'];
$admin_psw = $_POST['admin_psw'];
//在数据库中检索结果
$select = "SELECT admin_name,admin_psw FROM vip_admin_db";
$result = mysqli_query($conn, $select);
while($row = mysqli_fetch_assoc($result))
{
//用户名是否存在
if ($admin_name == $row["admin_name"])
{
//密码是否匹配
if ($admin_psw == $row["admin_psw"])
{
echo "<script>window.location.href = 'main.php'</script>";
}
else {echo "<script>window.location.href = 'AdminLogin.html';alert('密码输入错误！！！')</script>";}
}
}
//未找到用户名，返回注册
echo "用户名".$admin_name."未进行注册！！！<br>请进行注册<br>3s后跳转到注册页面";
header("refresh:5;url=AdminRegister.html");
?>AdminRegister.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>管理员注册</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function Admin_submit()
{
var Admin_name = document.getElementById("Admin_name").value;
var Admin_psw = document.getElementById("Admin_psw").value;
var Admin_phone_number = document.getElementById("Admin_phone_number").value;
var Admin_real_name = document.getElementById("Admin_real_name").value;
var department = document.getElementById("Department").value;
if(Admin_name == ""){alert("用户名为空！！！");return false;}
else if(Admin_psw == ""){alert("密码为空！！！");return false;}
else if(Admin_phone_number == ""){alert("手机号为空！！！");return false;}
else if(Admin_real_name == ""){alert("真实姓名为空！！！");return false;}
else if(department == ""){alert("部门为空！！！");return false;}
else
{
alert("确认提交");
return true;
}
}
function chongxie() {alert("确认要重新填写")}
</script>
</head>
<body class="AdminRegisterBody">
<script color="99,99,99" opacity="0.5" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<form name="forml" action="AdminRegister.php" method="post" onsubmit="return Admin_submit()" enctype="multipart/form-data">
<div align="center" class="AdminRegisterOutside">
<div class="AdminRegisterInside">
<h1>管理员注册</h1>
</div>
<div class="AdminRegisterInside">
<div class="AdminRegisterText"><b>用户名：</b><input type="text" name="admin_name" id="Admin_name"/></div>
<div class="AdminRegisterText"><b>密 码：</b><input type="password" name="admin_psw" id="Admin_psw"/></div>
<div class="AdminRegisterText"><b>手机号：</b><input type="text" name="admin_phone_number" id="Admin_phone_number"/></div>
<div class="AdminRegisterText"><b>姓 名：</b><input type="text" name="admin_real_name" id="Admin_real_name"/></div>
<div class="AdminRegisterText"><b>部 门：</b><input type="text" name="department" id="Department"/></div>
</div>
<div class="AdminRegisterInside">
<div class="AdminRegisterButton">
<input type="submit" name="btn_submit" value="提交"id="AdminRegiserButton1"/>
<input type="reset" name="btn_reset" value="重填" onclick="chongxie()" id="AdminRegiserButton2"/>
</div>
</div>
</div>
</form>
</body>
</html>
AdminRegister.php
<?php
//session验证防止未登录进入管理界面
$name = $_POST['admin_name'];
$psw = $_POST['admin_psw'];
if($name == '' && $psw == '')
{
echo "<script>window.location.href='AdminRegister.html';</script>";
}
session_start();
$_SESSION['name'] = $name;
//选择MySQL数据库信息
$servername = "localhost";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {die("Connection failed: " . mysqli_connect_error());}
//获取提交的信息
$admin_name = $_POST['admin_name'];
$admin_psw = $_POST['admin_psw'];
$admin_phone_number = $_POST['admin_phone_number'];
$admin_real_name = $_POST['admin_real_name'];
$department = $_POST['department'];
$ET = 0;
//判断是否已经注册
$select = "SELECT admin_name FROM vip_admin_db";
$result = mysqli_query($conn, $select);
while($row = mysqli_fetch_assoc($result))
{
if ($admin_name == $row["admin_name"])
{
echo "管理员：".$row["admin_name"]."已经注册！！！<br>3s后返回登入页面";
$ET = 1;
header("refresh:5;url=AdminLogin.html");
}
}
//写入数据库数据
if ($ET == 0)
{
$sql="INSERT INTO vip_admin_db (admin_name, admin_psw, admin_phone_number, admin_real_name, department)
VALUES ('$admin_name', '$admin_psw', '$admin_phone_number', '$admin_real_name', '$department')";
//数据库反馈信息
if (mysqli_query($conn, $sql)) {
echo "管理员录入成功！！！";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
//关闭数据库连接
mysqli_close($conn);
?>Checking.php
<?php
$name = $_POST['admin_name'];
$psw = $_POST['admin_psw'];
if($name != '' && $psw != '')
{
session_start();
$_SESSION['name'] = $name;
echo "<script>window.location.href='AdminLogin.php';</script>";
}
else {echo "<script>window.location.href='AdminLogin.html';</script>";}
?>back.php
<?php
session_start();
if(isset($_SESSION['name'])) {unset($_SESSION['name']);}
echo "退出成功！5秒后返回登入页面";
header("refresh:5;url=index.html");
?>main.php
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="AdminMainBody" >
<script color="50,50,50" opacity="0.5" count="150" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>
<div class="AdminMainDiv_00">
<div class="AdminMainDiv_01" align="center">
<form action="back.php" method="post" name="form_2">
<?php
//进行session验证
session_start();
if($_SESSION['name'] == '')
{
echo "<script>window.location.href = 'index.html';alert('非法进入！！！')</script>";
}
echo $_SESSION['name']."欢迎使用<br>";
echo "<input type=\"submit\" name=\"back\" value=\"注销\"/>";
?>
</form>
</div>
<div class="MainTable">
<table border="1" width="400px" class="MainTableAdmin">
<tr>
<td colspan="4" align="center">管理员信息</td>
</tr>
<tr>
<td width="50px">编号</td><td width="120px">用户名</td><td width="150px">电话</td><td width="80px">部门</td>
</tr>
<?php
$servername = "localhost";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";
// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("连接失败: " . mysqli_connect_error());
}
$sql = "SELECT admin_id_number, admin_name, admin_phone_number, admin_real_name, department FROM vip_admin_db";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0)
{
// 输出数据
while($row = mysqli_fetch_assoc($result))
{
echo "<tr><td>".$row["admin_id_number"]. "</td><td>" . $row["admin_name"]. "</td><td>" . $row["admin_phone_number"]. "</td><td>" . $row["department"]. "</td></tr>";
}
}
else {echo "0 结果";}
?>
</table>
<table border="1" width="390px" class="MainTableUser" align="center">
<tr>
<td colspan="3" align="center">会员信息</td>
</tr>
<tr>
<td width="120px">用户名</td><td width="150px">电话</td><td width="120px">微信号</td>
</tr>
<?php
$user_sql = "SELECT user_name, phone_number, real_name, WeChat FROM vip_db";
$user_result = mysqli_query($conn, $user_sql);
if (mysqli_num_rows($user_result) > 0)
{
// 输出数据
while($user_row = mysqli_fetch_assoc($user_result))
{
echo "<tr><td>".$user_row["user_name"]."</td><td>".$user_row["phone_number"]."</td><td>".$user_row["WeChat"]."</td></tr>";
}
}
else {echo "0 结果";}
mysqli_close($conn);
?>
</table>
</div>
</div>
</body>
</html>style.css
.IndexBody{
background-image: url('../photo/background_01.jpg');
background-size:100%;
}
.IndexTable{
width: 400px;
height: 300px;
border: 0px solid black;
/* 把元素变成定位元素 */
position: absolute;
/* 元素距离上，左都为50% */
left: 50%;
top: 50%;
/* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
margin-top: -150px;
margin-left: -200px;
opacity:0.5;
}
.IndexButton{
width: 100px;
height: 70px;
align-content: center;
}
.RegisterBody{
background-image: url('../photo/background_03.jpg');
background-size:100%;
width: 400px;
height: 300px;
border: 0px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
.AdminRegisterBody{
background-image: url('../photo/background_02.jpg');
background-size:100%;
width: 400px;
height: 300px;
border: 0px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
.LoginBody{
background-image: url('../photo/background_03.jpg');
background-size:100%;
}
.AdminLoginBody{
background-image: url('../photo/background_02.jpg');
background-size:100%;
border: 0px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
.AdminMainBody{
background-image: url('../photo/background_02.jpg');
background-size:100%
}
.AdminMainDiv_00{
border: 0px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
.UserOutside{
background-color: azure;
width:500px;height:300px;border:5px;
position:absolute; top:50%;left:50%; margin-top:-150px; margin-left:-250px;
border-radius: 15px;
opacity:0.5;
}
.UserOutside:hover{opacity: 0.9;background-color: aliceblue}
.UserInside{
margin: 50px auto 0;
text-align: center;
}
.UserText{height: 60px;}
.UserText input{
padding: 10px 10px;
background-color: #00000000;
}
.UserButton input{
margin-top: 10px;
width: 80px;height: 30px;
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
opacity: 0.9;
border-radius: 10px;
}
#UserButton1:hover{background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);}
#UserButton2:hover{background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);}
.UserRegisterOutside{
background-color: azure;
width:500px;height:500px;border:5px;
position:absolute; top:17%;left:50%; margin-top:-150px; margin-left:-250px;
border-radius: 15px;
opacity:0.5;
}
.UserRegisterOutside:hover{opacity: 0.9;background-color: aliceblue}
.UserRegisterInside{
margin: 50px auto 0;
text-align: center;
}
.UserRegisterText input{
text-align: left;
margin-bottom: .3rem;
padding: 10px 10px;
background-color: #00000000;
}
.UserRegisterButton input{
margin-top: 0px;
width: 80px;
height: 35px;
background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
opacity: 0.9;
border-radius: 10px;
}
#UserRegiserButton1:hover{background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);}
#UserRegiserButton2:hover{background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);}
.AdminOutside{
background-color: gainsboro;
width:500px;height:300px;border:5px;
position:absolute; top:50%;left:50%; margin-top:-50px; margin-left:-50px;
border-radius: 15px;
opacity:0.2;
}
.AdminOutside:hover{opacity: 0.8;}
.AdminInside{
margin: 50px auto 0;
text-align: center;
}
.AdminText{
height: 60px;
}
.AdminText input{
padding: 10px 10px;
background-color: #00000000;
}
.AdminButton input{
margin-top: 10px;
width: 80px;
height: 30px;
background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background-blend-mode: normal,color-burn;
opacity: 0.9;
border-radius: 10px;
}
#AdminButton1:hover{background-image: linear-gradient(to right, #868f96 0%, #596164 100%);}
#AdminButton2:hover{background-image: linear-gradient(to right, #868f96 0%, #596164 100%);}
.AdminRegisterOutside{
background-color: gainsboro;
width:500px;height:500px;border:5px;
position:absolute; top:17%;left:50%; margin-top:-150px; margin-left:-250px;
border-radius: 15px;
opacity:0.2;
}
.AdminRegisterOutside:hover{opacity: 0.8;background-color: gainsboro;}
.AdminRegisterInside{
margin: 50px auto 0;
text-align: center;
}
.AdminRegisterText input{
text-align: left;
margin-bottom: .3rem;
padding: 10px 10px;
background-color: #00000000;
}
.AdminRegisterButton input{
margin-top: 0px;
width: 80px;
height: 35px;
background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background-blend-mode: normal,color-burn;
opacity: 0.9;
border-radius: 10px;
}
#AdminRegiserButton1:hover{background-image: linear-gradient(to right, #868f96 0%, #596164 100%);}
#AdminRegiserButton2:hover{background-image: linear-gradient(to right, #868f96 0%, #596164 100%);}
.MainTable{text-align: center;margin-top: 20px;}
.MainTableUser{margin-top: 30px;}
实验展示
点击查看完整网页