创建类似淘宝的静态网页（二）创建搜索栏

一开始，献上最后的结果图，如下
显而易见，搜索栏从左往右包括三个部分。左边logo部分，中间搜索部分，右边图片部分。其中中间搜索部分又包括上下两个部分。所以，思路是创建一个大搜索栏div，里面包括三个子div，三个div从左往右排列。
这一部分的html代码如下：

	<!-- 搜索区域 -->
	<div class="search-wrap">
		<div class="search-con">
			<div class="logo-box"></div>
			<div class="search-box">
				<div class="search-box-bac">
					<input type="text" placeholder="连衣裙">
					<div class="search-box-btn">搜索</div>
				</div>
				<div class="goods-lable">
					<ul class="goods-lable-ul">
						<li class="goods-li">
							<a href="#">连衣裙</a>
						</li>
						<li class="goods-li">
							<a href="#">男裤</a>
						</li>
						<li class="goods-li">
							<a href="#">鱼竿</a>
						</li>
						<li class="goods-li">
							<a href="#">裙子</a>
						</li>
						<li class="goods-li">
							<a href="#">大码女装</a>
						</li>
						<li class="goods-li">
							<a href="#">阔腿裤</a>
						</li>
						<li class="goods-li">
							<a href="#">半身裙</a>
						</li>
						<li class="goods-li">
							<a href="#">aj1</a>
						</li>
						<li class="goods-li">
							<a href="#">女裤</a>
						</li>
						<li class="goods-li">
							<a href="#">工装裤男</a>
						</li>
						<li class="goods-li">
							<a href="#">裤</a>
						</li>
						<li class="goods-li-s">
							<a href="#">秋冬连衣裙</a>
						</li>
						<li class="goods-li">
							<a href="#">小白鞋</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="code-box"></div>
		</div>
	</div>

这一部分的css代码如下：

.wrapper .search-wrap{
	width: 100%;
	height: 97px;
	padding-top: 24px;
	/*border: 1px solid #000;*/
	background: #fff;
}
.wrapper .search-wrap .search-con{
	position: relative;
	width: 1190px;
	height:88px;
	margin: 0 auto;
	/*border: 1px solid #000;*/
}
.wrapper .search-wrap .search-con .logo-box{
	position: relative;
	top:-1px;
	display: inline-block;
	height:85px;
	width: 195px;
	vertical-align: middle;
	/*border: 1px solid #000;*/
	margin:0 39px;
	background-image: url(./img/picon.png);
	background-size: 100% 100%;
}
.wrapper .search-wrap .search-con .search-box{
	display: inline-block;
	height:85px;
	width: 627px;
	vertical-align: middle;
	/*border: 1px  solid #000;*/
	margin:0 39px;
}
.wrapper .search-wrap .search-con .code-box{
	display: inline-block;
	height:65px;
	width: 115px;
	vertical-align: middle;
	/*border: 1px solid #000;*/
	margin:0 39px;
	background-image: url(./img/code2.jpg);
}
.wrapper .search-wrap .search-con .search-box .search-box-bac{
	width: 100%;
	height:50px;
	background-color: #f40;
	/*border: 1px solid #000;*/
}
.wrapper .search-wrap .search-con .search-box .search-box-bac input{
	display: inline-block;
	width: 530px;
	height:42px;
	margin:1px 1px;
}
.wrapper .search-wrap .search-con .search-box .search-box-bac .search-box-btn{
	display: inline-block;
	width: 79px;
	height:42px;
	vertical-align: middle;
	background-color: #f40;
	color:#fff;
	font-size: 22px;
	text-align: center;
	line-height: 42px;
}
.wrapper .search-wrap .search-con .search-box .goods-lable{
	width: 627px;
	height:35px;
	/*border: 1px solid #000;*/
}
.wrapper .search-wrap .search-con .search-box .goods-lable .goods-lable-ul{
	float: left;
	height:35px;
	line-height: 35px;
}
.wrapper .search-wrap .search-con .search-box .goods-lable .goods-lable-ul li{
	display: inline-block;
}
.wrapper .search-wrap .search-con .search-box .goods-lable .goods-lable-ul .goods-li a{
	color: #777;
	font-size: 13px;
}
.wrapper .search-wrap .search-con .search-box .goods-lable .goods-lable-ul a:hover{
	color:#f40;
}
.wrapper .search-wrap .search-con .search-box .goods-lable .goods-lable-ul .goods-li-s a{
	color: #f40;
	font-size: 13px;
}

最后，前两部分合起来的效果图如下（图片素材是自己到t宝网和p多多截图下载的。。。）：