上级练习3--制作全国公安机关互联网管理服务平台

练习的架构：
在这里插入图片描述
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>

制作完成了之后的效果图：
在这里插入图片描述
路过的朋友们，喜欢的帮忙点个赞！

^明辨笃行

发布了152 篇原创文章 · 获赞 141 · 访问量 6万+

私信关注

上级练习3--制作全国公安机关互联网管理服务平台

猜你喜欢