项目实战--PC固态布局【3】插入背景图及搜索框及按钮

本文链接：https://blog.csdn.net/a716121/article/details/52183099

效果：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>项目实战-PC端固定布局（1）</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<header id="header">
	<div> class="center">
		<h1 class="logo">星月旅行社</h1>
			<nav class="link">
				<h2 class="none">网站导航</h2>
				<ul>
					<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>
					</ul>
				</nav>
	</div>
</header>

<!-- <header>header</header> -->

<div id="search">
	<div class="center"></div>
	<input type="text" class="search" placeholder="请输入旅游景点或城市" >
    <button class="button"> 搜索</button>
</div>

<footer >footer</footer>
</body>
</html>

style.css

@charset "utf-8";
/*内外边距都是0*/
body,h1,ul{
	margin: 0;
	padding: 0;
}
/*将ul前面的点去掉*/
ul{
	list-style: outside none none;
}
/*将链接的下划线去掉*/
a{
	text-decoration: none;
}
.none{
	display: none;
}
/*#333是黑色*/
#header{
	width: 100%;
	min-width: 1263px;
	height: 70px;
	background-color: #333;
	box-shadow: 0 1px 10px rgba(0,0,0,0.3);
	position: relative;
	z-index: 9999px;
}
#header .center{
	width: 1263px;
	height: 70px;
	margin: 0 auto;

}
/*将文本移走用到text-indent并插入logo*/
#header .logo{
	width: 240px;
	height: 70px;
	background-image: url(../img/4.png);
	text-indent: -9999px;
	float:left;
}
/*#eee是灰色  line-height设置垂直居中*/
#header .link{
	width: 650px;
	color:#eee;
	float: right;
	height: 70px;
	line-height: 70px;
}
/*水平居中*/
#header .link li{
	float: left;
	width:120px;
	text-align: center;

}
/*将a由内联设置成块*/
#header .link a{
	color:#eee;
	display: block;
}
/*鼠标效果*/
#header .link a:hover,
#header .active a{
background-color: #aaa;
}

/*插入背景图片*/
#search{
	width:100%;
	min-width: 1263px;
	height: 600px;
	background:url(../img/8.png) no-repeat center; 
	position: relative;
}
/*可以没有*/
/*#search .center{
	width: 600px;
	height: 60px;
	background-color: #000;
	position: absolute;
	top:50%;
	left: 50%;
	margin:-30px 0 0 -300px;
	opacity: 0.6;
	border-radius: 10px;

}*/
/*设置搜索框*/
#search .search{
	width: 480px;
	height: 54px;
	background-color: #fff;
	position: absolute;
	top:50%;
	left: 50%;
	margin:-27px 0 0 -296px;	
	color: #666;
	border:1px solid #666;
	border-radius: 10px;
	font-size: 24px;
	padding: 0 10px;
	outline: none;
}
/*设置按钮*/
#search .button{
	width: 120px;
	height: 54px;
	background-color: #eee;
	position: absolute;
	top:50%;
	left: 50%;
	margin:-27px 0 0 175px;	
	color: #666;
	border:1px solid #666;
	border-radius: 10px;
	font-size: 24px;
	outline: none;
	cursor: pointer;
	font-size: bold;


}