bootstrap样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
一般是把该css样式下载下来放在static文件夹中引用，但是我们为了演示方便直接用bootstrap样式链接
bootstrap样式链接
包含用户名和密码
<!DOCTYPE html>
<html>
<head>
<title>Japan_is_shit</title>
<!-- <link rel="stylesheet" href="\static\plugins\bootstrap-3.4.1\css\bootstrap.min.css" > -->
<!-- 样式链接 -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
/*最外面一个div的样式 */
.account {
height: 300px;
width: 550px;
border: 1px solid #000000;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
padding: 20px 60px;
box-shadow: 5px 5px 5px 5px #233;
}
/*用户登录标题设置*/
.account h2 {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
color: #1ff;
}
/*背景图设置*/
body {
background-image: url("https://pic.netbian.com/uploads/allimg/220410/183556-1649586956409a.jpg");
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="account" >
<h2>用户登录</h2>
<!-- 表单 -->
<form method="post" class="form-horizontal">
<!-- django默认在post请求加一个csrf_token值，不加{% csrf_token %}会报错 -->
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">用户名</label>
<div class="col-sm-10">
<input type="username" type="text" class="form-control" name="user" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">密码</label>
<div class="col-sm-10">
<input type="password" type="text" class="form-control" name="pwd" placeholder="密码">
</div>
</div>
<div class="form-group">
<!-- 错误信息 -->
<div class="col-sm-offset-2 col-sm-10" style="color: red;">{{error_msg}}</div>
<div class="col-sm-offset-2 col-sm-10"><button class="btn btn-primary btn-lg">登录</button></div>
</div>
</form>
</div>
</body>
</html>
包含用户名，密码和验证码
<!DOCTYPE html>
<html>
<head>
<title>Japan_is_shit</title>
<!-- <link rel="stylesheet" href="\static\plugins\bootstrap-3.4.1\css\bootstrap.min.css" > -->
<!-- 样式链接 -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
/*最外面一个div的样式 */
.account {
height: 400px;
width: 600px;
/*border: 1px solid #000000;*/
border-radius: 50px;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
padding: 20px 60px;
/*box-shadow: 5px 5px 5px 5px #233;*/
}
/*用户登录标题设置*/
/* .account h3 {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
color: #1ff;
}*/
/*背景图设置*/
body {
background-image: url("https://pic.netbian.com/uploads/allimg/220410/183556-1649586956409a.jpg");
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="account" >
<!-- <h3>用户登录</h3> -->
<!-- 表单 -->
<form method="post" class="form-horizontal">
<!-- django默认在post请求加一个csrf_token值，不加{% csrf_token %}会报错 -->
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">用户名</label>
<div class="col-sm-10">
<input type="username" type="text" class="form-control" name="user" placeholder="用户名" required style="border-radius: 50px; ">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">密码</label>
<div class="col-sm-10">
<input type="password" type="text" class="form-control" name="pwd" placeholder="密码" required style="border-radius: 50px; ">
</div>
</div>
<div class="form-group">
<label for="id_code" class="col-sm-2 control-label" style="color: #1ff">验证码</label>
<div >
<div class="col-sm-3">
<img id="image_code" src="/image/code/">
</div>
<div class="col-sm-7">
<input type="text" name="code" class="form-control" placeholder="请输入验证码" required id="id_code" style="border-radius: 50px; ">
<span style="color: red;">{{error_code}}</span>
</div>
</div>
</div>
<div class="form-group">
<!-- 错误信息 -->
<!-- col-sm-offset-2 col-sm-10 表示一行有12个格,div 占10格，并向右偏移两个（左面空两格，右边占满） -->
<div class="col-sm-offset-2 col-sm-10">
<span style="color: red;">{{error_msg}}</span>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button class="col-sm-2 btn btn-primary btn-lg">登录</button>
<!-- <a class="col-sm-offset-6 col-sm-4" href="###" style="color: #1ff">忘记密码?</a> -->
</div>
</div>
</form>
</div>
</body>
</html>
总结
本文只是对django文章中的login.html的样式做一个补充。
