练习的架构:
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="http://libs.baidu.com/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>Copyright2015 公安部网络安全保卫局 All Rights Reserved</p>
<p>邮箱:support@beian.gov.cn</p>
<p>京公网安备 11010102002019号 建议使用1024*768以上分辨率浏览</p>
</footer>
</body>
</html>
制作完成了之后的效果图:
路过的朋友们,喜欢的帮忙点个赞!