文章目录
- 前期准备：
- 步骤
- 整体代码
- 往期回顾
前期准备：
- 宽度 + 居中
- 内边距
- 表单
步骤
先准备一个框，作为登录界面的容器
.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.【案例 博客案例】
