实践练习02——制作header部分（图标、搜索框、热词、购物车）

header部分包含了图标、搜索框、热词、购物车等。

如上图所示，如此便可给出HTML的框架如下：

<!-- header制作 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
		</div>
		<!-- search -->
		<div class="search">			
		</div>
		<!-- hotwrods -->
		<div class="hotwrods">
		</div>
		<div class="shopcar">
		</div>
	</div>
	<!-- header结束 -->

给出了框架，要让每一个部分固定到如图所示的位置上，便要用到定位的技术了，这里我们要用到的便是relative 定位和absolute 定位。

• relative 定位
  相对定位元素的定位是相对其正常位置。相对定位元素经常被用来作为绝对定位元素的容器块。
• absolute 定位
  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，absolute 定位的元素和其他元素重叠。

将盒子定位到合适的位置后便是对每个盒子进行内容填充：

• logo部分便是给一个h1标签，再包一个a标签，然后将图片设置为背景图片，因为header部分是固定公用的部分，不管以后页面跳转到哪里，再次点击logo图标的话，我们就让他回到首页。
• search部分呢，就是一个文本搜索框和按钮
• hotwords部分直接用a标签将每一个热词包起来就好了
• shopcar部分呢就要稍微复杂一点，如下图所示：购物车图标和右边向右的图标箭头都是使用的字体图标，购物车的统计图标也是用的i标签，能看到图上边购物车统计图标只有左下角是直的，其余角都是有弧度的，这里用到了一个属性就是border-radius：border-radius: 左上角 右上角 右下角 左下角；通过对border-radius各个角设置弧度便能得到相应的效果了；这里还有一个点要注意的便是：当数量增加时，比如70便变700的话，我们因该让图标自动向右扩充，所以position定位的话，因该设置left值，除此之外不要给图标宽度，让她它数字扩充就好。
  完整HTML代码：

<!-- header制作 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<h1>
				<a href="index.html" title="百香果购物中心">百香果</a>
			</h1>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" class ="text" value="请搜索内容...">
			<button class="btn">搜索</button>
		</div>
		<!-- hotwrods -->
		<div class="hotwrods">
			<a href="#" class="style-red">优惠购首发</a>
			<a href="#">亿元优惠</a>
			<a href="#">9.9元团购 </a>
			<a href="#">美满99减30</a>
			<a href="#">办公用品 </a>
			<a href="#">电脑</a>
			<a href="#"> 通信</a>
			                      
		</div>
		<div class="shopcar">
			<i class="car"></i>我的购物车
			<i class="arrow"></i>
			<i class="count">70</i>
		</div>
	</div>
	<!-- header结束 -->
	

CSS代码：

/* header区域 */
.header {
	position: relative;
	height: 105px;
	
}
.logo {
	position: absolute;
	top: 25px;
	left: 0px;
	width: 175px;
	height: 56px;

}
.logo a {
	display: block;
	overflow: hidden;
	width: 175px;
	height: 56px;
	background: url(../img/logo.png) no-repeat;
	text-indent: -999px;
	/* 京东做法 */
	font-size: 0;
}

.search {
	position: absolute;
	top: 25px;
	left: 348px;
	
}
.text {
	float: left;
	width: 445px;
	height: 32px;
	border: 2px solid #b1191a;
	padding-left: 10px;
	color: #ccc;

}

.btn {
	float: left;
	width: 82px;
	height: 36px;
	background-color: #b1191a;
	border: 0;
	font-size: 16px;
	color: #fff;
}

.hotwrods {
	position: absolute;
	top:65px;
	left: 348px;
}
.hotwrods a {
	margin: 0 10px;
}
.shopcar {
	position: absolute;
	top: 25px;
	right: 64px;
	width: 138px;
	height: 34px;
	border: 1px solid #dfdfdf;
	background-color: #f7f7f7;
	line-height: 34px;
	text-align: center;
}
.car {
	font-family: 'icomoon';
	margin-right: 5px;
	color: #da5555;
}
.arrow {
	font-family: 'icomoon';
	margin-left: 5px;
}
.count {
	position: absolute;
	top: -5px;
	/* 因该是左对齐，文字才会向右走 */
	left: 100px;
	background-color: #e60012;
	height: 14px;
	padding: 0 3px;
	line-height: 14px;
	color: #fff;
	/* border-radius: 左上角 右上角 右下角 左下角； */
	border-radius: 7px 7px 7px 0px;
}

样式是这header部分用到了，还有部分公共代码样式在上节有贴出来。