练习的架构：
Boostrap的css样式代码需要自己下载，并且引入到项目里面
还有项目需要的图片资源需要自己下载哦
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;}
主页的html：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>全国公安机关互联网管理服务平台</title><!-- <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><link rel="stylesheet" type="text/css" href="css/component.css" /></head><body><header><div class="container"><div class="col-md-4"><h1><img src="./image/logo.png"></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;"><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 col-md-offset-3"><div class="col-md-8 "><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>
制作完成了之后的效果图：
路过的朋友们，喜欢的帮忙点个赞！
如果觉得《上级练习3--制作全国公安机关互联网管理服务平台》对你有帮助，请点赞、收藏，并留下你的观点哦！
