实现思路:从上到下,从左到右
一开始没想到怎么实现的是验证码和图片那里,实现验证码和图片那一块的布局还是一个input控件和一张图片,使用bootstrap里的input控件默认情况下,是占一行的。
<div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div>
去掉form-control就不占一行了,具体实现代码如下:
<div class="form-group">
<label for="code">验证码</label>
<!--加了form-control input独占一行-->
<div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px">
<img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div>
</div>
<div class="clearfix"></div>
<button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button>
<button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button>
登录页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!--引入bootstrap核心样式-->
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
<!--引入jquery核心js文件-->
<script src="../boot/js/jquery-3.5.1.min.js"></script>
<!--引入bootstrap核心js文件-->
<script src="../boot/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1 class="text-center" style="margin-top:70px">用户登录</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名:</label>
<input type="text" 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 class="form-group">
<label for="code">验证码</label>
<!--加了form-control input独占一行-->
<div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px">
<img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div>
</div>
<div class="clearfix"></div>
<button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button>
<button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button>
</form>
</div>
</div>
</div>
</body>
</html>
更多推荐
使用bootstrap框架实现简单登录页面
发布评论