创建类似淘宝的静态网页（三）创建屏幕导航栏

一开始，献上最后效果图

到了创建页面第三部分即屏幕导航栏了，第三部分从左往右分为两个小部分。第一部分是左边的“热词推荐”，其余的是右边的第二部分。
考虑到要与前面页面的前两部分保持对称和对齐，第三部分的html代码如下：

	<!-- 导航条 -->
	<div class="screen-nav">
		<div class="h-rec">
			<div class="h-rec-iw">
				<a href="#"><span class="h-rec-img"></span>
				<span class="h-rec-word">热词推荐</span>
			</div>
		</div>
		<div class="s-hot">
			<a href="#"><div class="s-hot-w hp">首页</div></a>
			<a href="#"><div class="s-hot-w nn">9.9疯抢</div></a>
			<a href="#"><div class="s-hot-w fm">50元封顶</div></a>
			<a href="#"><div class="s-hot-w fs">特卖汇</div></a>
		</div>
	</div>

css代码如下：

/*屏幕导航栏*/
.wrapper .screen-nav{
	width: 1190px;
	height: 30px;
	/*background-color: #f40;*/
	/*设置颜色渐变*/
	background:linear-gradient(#f40,#f00);
	margin:0 auto;
	/*border: 1px solid #000;*/
	position: relative;
}
.wrapper .screen-nav .h-rec{
	display: inline-block;
	width: 195px;
	height: 30px;
	/*border: 1px solid #000;*/
	position: relative;
	left: 35px;
	vertical-align: middle;
	/*margin:0 auto;*/
}
.wrapper .screen-nav .h-rec .h-rec-iw{
	margin:0 auto;
	width: 120px;
	height: 30px;
}
.wrapper .screen-nav .h-rec .h-rec-img{
	height: 20px;
	width: 20px;
	display: inline-block;
	background-image: url(./img/wz.png);
	background-size: 20px 20px;
	/*top:2px;
	position: relative;
	left: 39px;*/
}
.wrapper .screen-nav .h-rec .h-rec-word{
	display: inline-block;
	line-height: 30px;
	color: white;
	font-size: 20px;
	/*position: relative;
	top:-10px;
	left: 39px;*/
}
.wrapper .screen-nav .s-hot{
	display: inline-block;
	height: 30px;
	margin:0 112px;
	width: 627px;
	/*border: 1px solid #000;*/
	vertical-align: middle;
}
.wrapper .screen-nav .s-hot .s-hot-w{
	display: inline-block;
	width: 88px;
	height: 20px;
	line-height: 20px;
	margin:0 29px;
	color: white;
	vertical-align: middle;
	text-align: center;
	border-radius: 0.5em;
}
.wrapper .screen-nav .s-hot a{
	vertical-align: middle;
}
.wrapper .screen-nav .s-hot .s-hot-w.hp{
	background-color: white;
	color: #f40;
}
.wrapper .screen-nav .s-hot .s-hot-w:hover{
	background-color: white;
	color: #f40;
}

最后，加上之前的前两个部分，目前创建出的静态页面如下：