创建类似淘宝的静态网页(二)创建搜索栏

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

	
	

这一部分的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多多截图下载的。。。):
创建类似淘宝的静态网页(二)创建搜索栏_第1张图片

你可能感兴趣的:(前端,css,html,前端)