文章目录
bootstrap样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
一般是把该css样式下载下来放在static文件夹中引用，但是我们为了演示方便直接用bootstrap样式链接
bootstrap样式链接
包含用户名和密码
DOCTYPE html>
<html>
<head>
<title>Japan_is_shittitle>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.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">
{% 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_shittitle>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.account {
height: 400px;
width: 600px;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
padding: 20px 60px;
}
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" >
<form method="post" class="form-horizontal">
{% 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">
<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>
div>
div>
form>
div>
body>
html>
总结
本文只是对django文章中的login.html的样式做一个补充。
Original: https://blog.csdn.net/qq_43504837/article/details/124750273
Author: JAPAN_is_shit
Title: python + django搭建页面 (login.html 的css样式)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/737506/
转载文章受原作者版权保护。转载请注明原作者出处！