参考链接：https://blog.csdn.net/qq_38680405/article/details/118699677
在项目中manage.py同级目录下的static文件夹中，有app002的文件夹，在里面新建css文件夹，然后存放css文件“tst.css”。我的文件目录如下图所示：
2、在与项目同名的包的settings.py中配置静态文件路径，在settings.py的最后面，STATIC_URL = '/static/'这一行后面添加：(这一步之前的教程好像添加过了)
STATICFILES_DIRS = [
(os.path.join(BASE_DIR,'static'))
]
3、在调用了tst.css的html文件login.html(存放在templates/app002下)中加入tst.css的路径：
static/app002/css/login.css文件代码：
body{
margin:0;
padding:0;
font-family: sans-serif;
background: url('/static/img/login_gb.png') no-repeat center0px;
background-size: cover;
background-position: center0;
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 15px25px 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:10px0;
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:10px0;
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:10px20px;
cursor: pointer;
border-radius:5px;
}
templates/app002/login.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/static/app002/css/login.css" />
</head>
<body>
<form action="/app002/login/" method="post">
{% csrf_token %}
<div class="login-box">
<h2>用户登录界面</h2>
<form>
<div class="login-field">
<input type="text" name="username" required="" />
<label>用户名</label>
</div>
<div class="login-field">
<input type="password" name="password" required="" />
<label >密码</label>
</div>
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
html设置button水平居中：
<button type="submit" style="display:block;margin:0 auto">登录</button>
后来又设计了下index的界面，增加了下载说明文档，也就是有两个文件可以下载。
