效果：
涉及到知识点:
- HTML：创建网页用的标记语言
- CSS：美化网页的样式语言
- Javascript(JS)：是一种轻量级的客户端脚本语言，通常直接嵌入到HTML页面，在客户端执行。
1、让登录的区块在浏览器的正中心显示
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
2、背景图片在缩放的情况下不变动
body {
background-image: url("{% static 'upload/06212015-e8da-4442-a5da-c3067cd7630b.jpg' %}");
background-repeat: no-repeat;
background-size: 100%;
}
3、解决输入框选中会变黑的问题(顺便设置边框淡灰点)
outline: none;
border: 1px solid lightgrey
4、解决按钮边框是黑色的问题
border:1px solid 颜色和填充的颜色一致即可
5、让鼠标在点击时有个小手出现：
cursor:pointer
用到的背景图片:
页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
{% load static %}
<style type="text/css">
body {
background-image: url("{% static 'upload/06212015-e8da-4442-a5da-c3067cd7630b.jpg' %}");
background-repeat: no-repeat;
background-size: 100%;
}
a {
text-decoration: none;
}
.fm {
width: 400px;
height: 200px;
box-shadow:0 5px 20px 0 #e8e8e8;
overflow: hidden;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
border-radius: 30px;
}
.login {
width: 300px;
height: 150px;
margin-left: 90px;
margin-top: 30px;
}
.login h3 {
margin-left: 20px;
color: forestgreen;
}
.btn {
margin-left: 60px;
}
.btn input,.btn button {
background-color: forestgreen;
color: white;
border: 1px forestgreen solid;
cursor: pointer;
}
.login form input {
outline: none;
border: 1px solid lightgrey;
}
</style>
</head>
<body>
<div class="fm">
<div class="login">
<h3>欢迎使用后台管理系统</h3>
<form action="" method="post">
{% csrf_token %}
<p>用户名: <input type="text" name="username" placeholder="Username"></p>
<p>密 码: <input type="password" name="password" placeholder="Password"></p>
{#button标签里有a标签#}
<p class="btn"><input type="submit" value="登录"> <button><a href="{% url 'register' %}" style="color: white">注册</a></button></p>
</form>
</div>
</div>
</body>
</html>
