用PHP与html做一个简单的登录页面
login.html的设计
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="./login.css">
</head>
<body>
<div class="loginCard">
<div class="logo">
<img src="./mag/logo.png" alt="" srcset="">
</div>
<form action="./login.php" method="post">
<label for="">昵称：</label>
<input type="text" name="username" id="" placeholder="请输入昵称"><br><br>
<label for="">密码：</label>
<input type="password" name="password" id="" placeholder="请输入密码"><br><br>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>login.css
css
body{
background-image: url(mag/login_beijing.jpg);
/* 平铺图片 */
background-size: cover;
}
.loginCard{
/* 自适应 */
width: fit-content;
/* 上右下左边距 */
padding: 12px 24px;
/* 边框 */
border: 1px solid red;
/* 外边距 */
margin: 200px auto;
box-shadow: 2px 2px 10px 1px #adadb3;
border-radius: 4px;
background-color: rgb(255, 255, 255,0.5);
}
.loginCard .logo{
margin: 0 auto;
width: 60px;
height: 60px;
transform: translateY(-40px);
border: 1px solid coral;
border-radius: 50px;
background-color: #F6F6F6;
box-shadow: 2px 2px 10px 1px #adadb3;
}
.loginCard .logo img{
width: 70%;
padding: 9px;
}login.php
php
<?php
session_start();
if(!isset($_SESSION['uuser'])){
$username=$_POST["username"];
$password=$_POST["password"];
if($username=="张三" && $password=="123456"){
$_SESSION['uuser']=$username;
echo "成功登录";
}else{
echo "非法登录";
}
}else{
echo "已经登录";
unset($_SESSION['uuser']);
}
?>素材
