django学习入门系列之第四点《案例登录》

文章目录

前期准备：
步骤
整体代码
往期回顾

前期准备：

宽度 + 居中
内边距
表单

步骤

先准备一个框，作为登录界面的容器

.frame{height: 380px;width: 600px;margin: 150px auto 0;border: 1px solid black;}

将里面输入登录样式内容（表单）

<form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button>
</form>

修改上诉内容，改成自己需要的

<div class="frame"><div><h1 class="text">登录</h1><form><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><div><button type="submit" class="btn btn-primary button">登录</button></div></form></div>
</div>

<style>.frame {height: 380px;width: 500px;margin: 150px auto 0;border: 1px solid black;padding-top: 50px;padding-left: 100px;padding-right: 100px;box-shadow: 5px 5px 5px #aaa;}.text {text-align: center;}.button{margin-left:123px;margin-top: 10px;}</style>

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 开发版本  --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!-- 生产版本（压缩版）   --><link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.frame {height: 380px;width: 500px;margin: 150px auto 0;border: 1px solid black;padding-top: 50px;padding-left: 100px;padding-right: 100px;box-shadow: 5px 5px 5px #aaa;}.text {text-align: center;}.button{margin-left:123px;margin-top: 10px;}</style>
</head>
<body><div class="frame"><div><h1 class="text">登录</h1><form><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><div><button type="submit" class="btn btn-primary button">登录</button></div></form></div>
</div></body>
</html>

[外链图片转存中…(img-KWx34OSG-1720206079524)]

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】