第四章 Django登录界面优化
以下是登录界面的代码：可以按个人喜好，更新颜色及背景图
修改背景图的方法：如何设置的网页背景图片？点击查看详情
{% load static %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Login</title>
<style type="text/css">
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*实现块元素百分比下居中*/
width:450px;
padding:50px;
background: rgba(0,0,0,.8);
box-sizing:border-box;
box-shadow: 0px 15px 25px rgba(0,0,0,.5);
border-radius:15px;
}
.box h1{
margin:0 0 30px;
padding:0;
color: #fff;
text-align:center;
}
.box .ibox{
text-align:center;
}
.box .ibox input{
width: 100%;
padding:10px 0;
font-size:16px;
color:#fff;
letter-spacing: 1px;
margin-bottom: 30px;
border:none;
border-bottom: 1px solid #fff;
outline:none;
background: transparent;
}
.box .btn{
background: #FF8000;
}
</style>
</head>
<body style="background-image: url({% static 'images/1.jpg' %});background-size:100% 100%;background-repeat:no-repeat;">
<div class="box">
<h1>发布会管理系统</h1>
<form method="post" action="/login_action/">
<div class="ibox">
<input name="username" type="text" placeholder="请输入用户名" style="width:230px; height:30px;"><br>
</div>
<div class="ibox">
<input name="password" type="password" placeholder="请输入密码" style="width:230px; height:30px;">
<!-- <br>{{error}}<br>-->
</div>
<div class="ibox">
<button class="btn" type="submit" style="width:230px; height:40px;color: #fefefe" >登录</button>
</div>
{%csrf_token%}
</form>
</div>
</body>
</html>
知识点：
1）在需要修改样式的标签中添加class属性，例如
<div class="box"> </div>
然后通过class的值：box，在以下标签中定义样式（颜色、大小、位置等）
<style type="text/css">定义样式</style>
例如
<style type="text/css">
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*实现块元素百分比下居中*/
width:450px;
padding:50px;
background: rgba(0,0,0,.8);
box-sizing:border-box;
box-shadow: 0px 15px 25px rgba(0,0,0,.5);
border-radius:15px;
}
</style>
2）如果涉及多层，例如
<div class="box">
<h1>发布会管理系统</h1>
</div>
则如下：
.box h1{
margin:0 0 30px;
padding:0;
color: #fff;
text-align:center;
}