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

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

	
	

		

			

			

				

					
					
搜索
				
				

					

						

							连衣裙
						
						

							男裤
						
						

							鱼竿
						
						

							裙子
						
						

							大码女装
						
						

							阔腿裤
						
						

							半身裙
						
						

							aj1
						
						

							女裤
						
						

							工装裤男
						
						

							裤
						
						

							秋冬连衣裙
						
						

							小白鞋
						
					
				
			
			

		
	

这一部分的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多多截图下载的。。。）：