1、https://blog.csdn.net/qq_41325698/article/details/102591169?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control
2、django实现的登陆代码
https://blog.csdn.net/weixin_39860046/article/details/88832768?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
HTML：
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title></title>
-
<link rel="stylesheet" type="text/css" href="css/tx1.css" />
-
-
</head>
-
<body>
-
-
<div class="login-box">
-
<h2>Login</h2>
-
<form>
-
<div class="login-field">
-
<input type="text" name="" required="" />
-
<label>Username</label>
-
</div>
-
<div class="login-field">
-
<input type="password" name="" required="" />
-
<label >Password</label>
-
</div>
-
<button type="submit">Submit</button>
-
</form>
-
</div>
-
-
-
-
</body>
-
</html>
css：
-
body{
-
margin: 0;
-
padding: 0;
-
font-family: sans-serif;
-
background: url(../img/bg.jpg) no-repeat center 0px;
-
background-size: cover;
-
-
-
-
background-position: center 0;
-
background-repeat: no-repeat;
-
background-attachment: fixed;
-
-webkit-background-size: cover;
-
-o-background-size: cover;
-
-moz-background-size: cover;
-
-ms-background-size: cover;
-
-
}
-
.login-box{
-
position: absolute;
-
top: 50%;
-
left: 50%;
-
transform: translate(-50%,-50%);
-
width: 400px;
-
padding:40px;
-
background: rgba(0,0,0,.8);
-
box-sizing: border-box;
-
box-shadow: 0 15px 25px rgba(0,0,0,.5);
-
border-radius: 10px;
-
}
-
.login-box h2{
-
margin: 0 0 30px;
-
padding: 0;
-
text-align: center;
-
color: #fff;
-
}
-
.login-box .login-field{
-
position: relative;
-
}
-
.login-box .login-field input{
-
width: 100%;
-
padding: 10px 0;
-
font-size: 16px;
-
color: #fff;
-
margin-bottom: 30px;
-
border: none;
-
border-bottom: 1px solid #fff;
-
outline: none;
-
background: transparent;
-
}
-
.login-box .login-field label{
-
position: absolute;
-
top: 0;
-
left: 0;
-
letter-spacing: 1px;
-
padding: 10px 0;
-
font-size: 16px;
-
color: #fff;
-
pointer-events: none;
-
transition: .5s;
-
}
-
.login-box .login-field input:focus ~ label,
-
.login-box .login-field input:valid ~ label{
-
top: -23px;
-
left: 0;
-
color: aqua;
-
font-size: 12px;
-
}
-
.login-box button{
-
background: transparent;
-
border: none;
-
outline: none;
-
color: #fff;
-
background: #03a9f4;
-
padding: 10px 20px;
-
cursor: pointer;
-
border-radius: 5px;
-
}
