网页制作模仿（3）

接下来做这一部分

 我们可以看到这部分总共分为，1左方的图片（这里随便找的一个京东的png图片），2搜索栏，3购物车，4搜索栏下面的关键字。二维码图片在网页制作模仿（2）中已经做了，所以这里不包括。

一共需要制作4个部分。

特别注意：京东的图片点击时候，可以跳转网页。

 html代码如下：

<!--最大的盒子-->
		<div class="bigHeader">
			<div class="w header">
				<!--这里第一部分-->
				<div class="logo">
					<!--添加点击图片连接-->
					<a href="https://hellojoy.jd.com/?babelChannel=1518455&activityId=7980&source=01">
						<!--logo图片-->
						<img src="img/logo4.png" width="190px" height="160px" />
					</a>
				</div>
				<!--这里是第二部分-->
				<div class="from">
					<input type="text" placeholder="扫描仪"/>
					<a href="#"><i></i></a>
					<button>
						<i></i>
					</button>
				</div>
				<div class='shopCar'>
				<i></i>
				<!--这里是第三部分-->
				<a href="#" class="fred">我的购物车</a>
				<span>0</span>
			</div>
			<!--这里是第四部分-->
			<div class="keyword">
				<a href="#">京东美妆</a>
				<a href="#">沃尔玛88</a>
				<a href="#">绿色建材</a>
				<a href="#" >正品鉴别</a>
				<a href="#">手机好店</a>
				<a href="#" >键盘鼠标</a>
				<a href="#">购机补贴</a>
			</div>

css代码如下：

.bigHeader{
	border-bottom: 1px solid #ddd;
	color: #999;
	font-size: 12px;
	width: 1536px;
	background-color:#ffff;
}
.w{
	width: 1190px;
	margin: 0 auto;
}
.header{
	position: relative;
	height: 140px;
}
.logo{
	position: absolute;
	width: 190px;
	height: 120px;
	margin-top: 10px;
}
.logo img{
	margin-top: -30px;
}
.from{
	width: 550px;
	height: 35px;
	top: 25px;
	left: 320px;
	position: absolute;
	
}
.from input{
	width: 493px;
	height: 33px;
	font-size: 12px;
	border: 2px solid #f10215;
	float: left;
	padding-left: 3px;
}
input,button{
	border:0;
	outline: none;
}
.from button{
	width: 50px;
	height: 37px;
	background-color:#f10215 ;
	float: left;
}
button:hover{
	cursor: pointer;
}
.from button i{
	font-family:'icomoon';
	font-style: normal;
	color: #fff;
}
.from a i{
	position: relative;
	margin-left: -85px;
	font-family:'icomoon';
	font-style: normal;
	font-size: 16px;
	top: 10px;
}
.shopCar{
	width: 110px;
	line-height: 33px;
	height: 33px;
	border: 1px solid #ececec;
	position: absolute;
	top: 25px;
	right: 180px;
	text-align: center;
}
.shopCar i{
	font-family:'icomoon';
	margin-right: 5px;
	color: #f10215;
	font-style: normal;
}
.shopCar:hover{
	border:1px solid #f10215;
}
.shopCar span{
	color: #fff;
	width: 15px;
	height: 12px;
	background:#f10215;
	border-radius: 45%;
	position: absolute;
	top: 1px;
	right: 73px;
	font-size: 12px;
	line-height: 12px;
}
.keyword{
	position: absolute;
	top: 68px;
	left: 320px;
	}
	.keyword a{
		margin-right: 10px;
	}