搜索栏

搜索栏

<div id="search" class="clearfix">
		<div class="left">
			<h1><a href="#" target="_blank">栀子花</a></h1>
		</div>

		<div class="right">
			<span class="close">&times</span>
			<span class="c5">扫描二维码</span>
			<a href=""></a>
		</div>
				<div class="center">
			<ul class="searchTab clearfix">
				<li class="active">货物</li>
				<li>店铺</li>
			</ul>
			<div class="searchContent clearfix">
				<form action="#">
						<div class="searchBox fl">
							<input type="text" name="" value="">
							<div class="placeholder">
								<i class="iconfont">&#xe615;</i>
								<span>网红零食 高级名牌 传统工艺</span>
							</div>
							<a href="" class="iconfont photo">&#xe72a;</a>
						</div>
						<div class="btn fl">
							<button type="submit"">搜索</button>
						</div>
				</form>
			</div>
			<div class="list">
				<a class="c5" href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a class="c5" href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
				<a href="#" >店铺</a>
			</div>
		</div>
	</div>

#search {
	height:130px;
	margin-top: 4px;
	background-color: #fff;
	padding: 24px 0 10px 0; 
	
}

#search .left{
	float: left;


}

#search .left h1 a{
	display: block;
	height: 120px;
	width: 300px;
	background-image: url(images/logo.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px 120px;
	text-indent: -999999px;
	margin-top: 8px;
}

#search .right{
	float: right;
	height: 86px;
	width: 72px;
	border: 1px solid #eee;
	position: relative;
	margin-right: 110px;
	text-align: center;
}

#search .right a{
    display:block;
	height: 62px;
	width: 62px;
	background-image: url(images/code.jpg);
	background-size: 62px 62px;
	margin: 0 auto;
	

}
#search .right .close{
	position: absolute;
	width: 14px;
	height: 14px;
	font-size: 14px;
	border: 1px solid #eee;
	left: -16px;
	top: -1px;
	color: #ddd;
	cursor: pointer;
	line-height: 14px;
}
.searchTab {
	height: 22px;
	padding-left: 17px;
}

.searchTab li{
	float: left;
	width: 36px;
	line-height: 22px;
	margin-right: 4px;
	text-align: center;
	color: #f40;
	cursor: pointer;
}

#search .center{
	width: 500px;
	margin: 0 auto;
}

.searchTab li.active{
	font-weight: bold;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	border-radius: 6px 6px 0 0;
	color: #fff;
}
.searchContent{
	height: 40px;
}
.searchBox{
	width: 420px;
	height: 40px;
	box-sizing: border-box;
	border: 2px solid #ff5000;
	border-right: none;
	border-radius: 20px 0 0 20px;
	overflow: hidden;
	position: relative;
}

.searchBox input{
	width: 320px;
	height: 36px;
	line-height: 36px;
	outline: none;
	border: none;
	text-indent: 10px;
	position: absolute;/*达到同样的层级*/
	z-index: 2;/*然后改变层级*/
	background-color: transparent;/*透明背景，为了看到后面的文字*/
}

.placeholder{
	position: absolute;
	top: 6px;
	left: 14px;
}

.placeholder span{
	color: #9c9c9c;
	vertical-align: 1px;
}

.photo{
	position: absolute;
	right: 20px;
	font-size: 28px;
	color: #9c9c9c;
	top: -2px;
	cursor: pointer;
}



#search button{
	width: 60px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	border-radius: 0 20px 20px 0; 
}

#search .list{
	height: 25px;

}

#search .list a:hover{
	color: #f50;
}