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.【案例 博客案例】
原文地址:https://blog.csdn.net/qq_62548908/article/details/140203640
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!