需求说明
使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮
运行效果
参考代码
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><title>全国公安机关互联网管理服务平台</title><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/myCSS.css"/></head><body><header><div class="container"><div class="col-md-4"><h1><img src="image/logo.png" alt=""/></h1></div><div class="col-md-6 col-md-offset-2 text-right"><form action="#" class="form-inline head_form "><input type="search" class="form-control" placeholder="请输入要搜索的内容"/><input type="button" class="btn btn-success" value="搜索"/></form><ul class="list-inline"><li class="active"><a href="#">首页</a></li><li><a href="#">公共查询</a></li><li><a href="#">常见问题</a></li><li><a href="#">政策法规</a></li><li><a href="#">通知公告</a></li><li><a href="#">备案须知</a></li><li><a href="#">备案展厅</a></li></ul></div></div></header><section><div class="container"><div class="row"><div class="col-md-8"><img src="image/xcy.png" style="margin-top: 20px;" alt=""/><br/><img src="image/liucheng.png" style="margin-top: 40px; margin-left: 80px;" alt=""/></div><div class="col-md-4 formMain"><h2>普通用户</h2><form action="#"><div class="form-group form-horizontal"><span class="col-md-3 text-center">用户名：</span><div class="col-md-9"><input type="text" class="form-control"/></div></div><br/><div class="form-group form-horizontal"><span class="col-md-3 text-center">密码：</span><div class="col-md-9"><input type="text" class="form-control"/></div></div><div class="form-group" style="margin-top: 30px;"><div class="col-md-6 col-md-offset-3"><input type="checkbox"/>记住密码</div></div><div class="form-group "><div class="col-md-8 col-md-offset-3"><a href="#" class="btn btn-danger form-control">登录</a></div></div><div class="form-group "><div class="col-md-6 col-md-offset-3"><p><a href="#">没有账号，注册</a></p></div></div></form></div></div></div></section><footer class="text-center"><p>Copyright 公安部网络安全保卫局 All Rights Reserved</p><p>邮箱：support@</p><p> 京公网安备 1101010200号 建议使用1024*768以上分辨率浏览</p></footer></body></html>
myCSS.css
body {font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;}.head_form{margin: 20px;}.active a{color: #da001c;}section{background: url("../image/adbg.png") 0 0 no-repeat;width: 100%;height: 385px;}h2{font-size: 16px;}.formMain{margin-top: 50px;background: #fff;border-radius: 8px;}.form-group{padding-top: 20px;}footer{background: rgba(204, 204, 204, 0.6);padding: 20px;}
超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：
腾讯课堂测试技术学习地址
欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。
基于HTML5的移动Web应用——Bootstrap 样式案例：制作全国公安机关互联网管理服务平台登录页面
如果觉得《基于HTML5的移动Web应用——Bootstrap 样式案例：制作全国公安机关互联网管理服务平》对你有帮助，请点赞、收藏，并留下你的观点哦！
