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;
-
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？