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:
<?phpinclude_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']) {//开启sessionsession_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为1header("Location:../index.php?err=1");}}else {//用户名或密码为空，赋值err为2header("Location:../index.php?err=2");}?>数据库：
数据库名：test
表名：user
各属性值：
