1.效果圖——自我感覺還不算太難看hhhhh
2.完整代碼
Index.php：
<!DOCTYPE html>
<html>
<head>
<meta name="content-type"; charset="UTF-8">
<title>校園-監督人 登錄</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery-3.3.1.js"></script>
<!--/背景的雪花動態樣式-->
<script src="js/xuehua.js"></script>
<script>
$(document).ready(function(e){
$(".yonghuming").click(function(){
$("#fanhuizhi").hide();
});
$(".mima").click(function(){
$("#fanhuizhi").hide();
});
});
</script>
</head>
<body>
<!--登錄塊開始-->
<form id="loginform" action="denglu/loginaction.php"
autocomplete="off" method="post">
<img src="image/dump.svg" id="img_denglu"/>
<div class="login_div1">
<!--用戶名塊開始-->
<div class="yonghuming">
<input type="text" id="name" class="input_yhm"
name="username" required="required"
placeholder="用戶名"
value="<?php echo isset($_COOKIE["test"])?$_COOKIE["test"]:"";?>">
<img class="img_yhm" src="zhuce/yonghu.svg"/>
</div>
<div class="mima">
<input type="password" id="password"
placeholder="密碼"
class="input_mima" name="password">
<img class="img_mima" src="zhuce/mima.svg"/>
</div>
<input type="submit" id="login" class="submit_login" name="login" value="登錄">
<!--返回登錄狀態-->
<div id="fanhuizhi">
<?php
$err=isset($_GET["err"])?$_GET["err"]:"";
switch($err){
case 1:
echo "用戶名或密碼錯誤！";
break;
case 2:
echo "用戶名或密碼不能爲空！";
break;
}
?>
</div>
<div id="huanying">
校園"監督人" 歡迎你
</div>
<a href="zhuce/register.php">
<span id="zhucewenzi">註冊</span>
</a>
</div>
</form>
</body>
</html>
login.css:
html{
font-size: 62.5%;
}
*{
margin: 0rem;
padding: 0rem;
}
body{
background-color: #1ABD9D;
}
.snow{
position:fixed;
top:0;
color:#fff;
z-index:99999999;
}
#img_denglu{
position: absolute;
width: 55vw;
height: 400px;
left: 6vw;
top: 150px;
}
.login_div1{
border-radius: 5px;
position: absolute;
top: 160px;
background-color: white;
left: 60vw;
width: 30vw;
height:360px;
box-shadow: #009688 0px 0px 30px;
}
.yonghuming{
top: 50px;
border-radius: 5px;
margin: 0 auto;
background-color: white;
width: 26vw;
height: 50px;
position: relative;
/*overflow: hidden;*/
}
.input_yhm{
position: absolute;
border: 0;
width: 21vw;
height: 48px;
left: 4vw;
border-radius: 5px;
margin: 0 auto;
outline: none;
color: gray;
font-size: 20px;
border: 1px solid gainsboro;
}
input { filter: none !important; }
.img_yhm{
top: 1px;
left: 0.5vw;
position: absolute;
width: 40px;
height: 50px;
}
/*密碼*/
.mima{
top: 80px;
border-radius: 5px;
margin: 0 auto;
background-color: white;
width: 26vw;
height: 50px;
position: relative;
/*overflow: hidden;*/
}
.input_mima{
position: absolute;
/*box-shadow: 0 0 20px 10px #fff inset;*/
border: 0;
width: 21vw;
left: 4vw;
height: 48px;
border-radius: 5px;
margin: 0 auto;
outline: none;
font-size: 20px;
color: gray;
border: 1px solid gainsboro;
}
.img_mima{
top: 1px;
left: 0.5vw;
position: absolute;
width: 40px;
height: 50px;
}
/*登錄*/
.submit_login{
position: absolute;
margin: 0 auto;
height: 50px;
width: 22vw;
top: 240px;
left: 4vw;
outline: none;
background-color: #1ABD9D;
border:0;
font-size: 20px;
border-radius: 5px;
transition: 0.3s;
color: white;
}
.submit_login:hover{
color: black;
font-weight: 500;
transition: 0.3s;
cursor:pointer;
background-color: gainsboro;
}
#fanhuizhi{
width: 30vw;
height: 40px;
position: relative;
top: 90px;
text-align: center;
font-size:15px;
line-height: 40px;
color:#F04D4E;
background-color: white;
}
#huanying{
position: absolute;
width: 30vw;
height: 40px;
top: 310px;
line-height: 40px;
text-align: center;
color:gainsboro;
font-size: 14px;
}
#fangxiang{
position: absolute;
width: 50px;
height: 70px;
left: 31vw;
top: 340px;
}
#zhucewenzi{
top: 320px;
left: 26vw;
width: 40px;
height: 30px;
font-size: 14px;
position: absolute;
color: gainsboro;
}
#zhucewenzi:hover{
color: #1ABD9D;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
shujuku.php:
<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
header("Content-Type: text/html;charset=utf-8");
//連接數據庫
$conn = mysqli_connect('localhost:3306','root','root','test');
?>
loginanction.php:
<?php
include_once("../shujuku.php");
ini_set("error_reporting","E_ALL & ~E_NOTICE");
header("Content-Type: text/html;charset=utf-8");
//聲明變量
$username = isset($_POST['username'])?$_POST['username']:"";
$password = isset($_POST['password'])?$_POST['password']:"";
//判斷用戶名和密碼是否爲空
if(!empty($username)&&!empty($password))
{
//準備SQL語句
$sql_select = "SELECT id,username,password FROM user WHERE username = '$username' AND password = '$password'";
//執行SQL語句
$ret = mysqli_query($conn,$sql_select);
$row = mysqli_fetch_array($ret);
//判斷用戶名或密碼是否正確
if($username==$row['username']&&$password==$row['password'])
{
//開啓session
session_start();
//創建session
$_SESSION['user']=$username;
$_SESSION['id'] = $row['id'];
//寫入日誌
$ip = $_SERVER['REMOTE_ADDR'];
$date = date('Y-m-d H:m:s');
//跳轉到登錄成功所展示的頁面
header("Location:../zhuye/zhuye.php");
//關閉數據庫
mysqli_close($conn);
}
else
{
//用戶名或密碼錯誤，賦值err爲1
header("Location:../index.php?err=1");
}
}
else
{
//用戶名或密碼爲空，賦值err爲2
header("Location:../index.php?err=2");
}
?>
數據庫：
數據庫名：test
表名：user
各屬性值：
