1.引入bootstrap
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
2.通过.account来使内容居中，构造一个边框，其中margin-left,margin-right，margin-top可以调节位置。
3.border-shadow调节阴影，border-radius调节边框圆角，padding用来实现内边距调节。
4.通过bootstrap组件中的css样式查找需要的组件。
全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
具体代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.account{
width:400px;
border:1px solid #dddddd;
border-radius:100px;
box-shadow:5px 5px 20px #aaa;
margin-left:auto;
margin-right:auto;
margin-top:200px;
padding:50px;
}
.account h1{
text-align:center;
}
</style>
</head>
<body>
<div class="account">
<h1>用户登录</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>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
<div style="height:1000px;"></div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
