网页导航栏小技巧

使用li+a构建网页导航栏

　　首先说一下建导航栏时使用li+a而不是直接使用li的原因：一般导航都是具有超链接功能，a标签具有这个功能，而lis标签只是罗列信息列表，不具备链接功能。
　　方法：一般我们在li中指定width，float;然后在a中使用display:block;再指定width和height，让它自动填充li即可。
　　具体小例子见代码：
HTML：

<div id="nav">
	<ul>
		<li><a href="javascript:;">站长之家</a></li>
		<li><a href="javascript:;">行业资讯</a></li>
		<li><a href="javascript:;">站长在线</a></li>
		<li><a href="javascript:;">网站运营</a></li>
		<li><a href="javascript:;">设计在线</a></li>
		<li><a href="javascript:;">网络编程</a></li>
		<li><a href="javascript:;">联盟资讯</a></li>
		<li><a href="javascript:;">服务器</a></li>
	</ul>
</div>

CSS：

#nav{
	width: 730px;
	margin: 20px auto;
	border:1px solid blue;
	background: blue;
}
#nav ul{
	list-style-type: none;
	overflow: hidden;
	margin-left: 10px;
}
#nav ul li{
	width: 80px;
	float: left;
	margin-right: 10px;			
	background: cornflowerblue;
	cursor: pointer;
}
#nav ul li a{
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	padding: 5px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
#nav ul li a:hover{
	font-weight: 700;
	background: #aaa;
}

　　麻雀虽小五脏俱全啊，涵盖了很多最近学到的知识点，算是在此纪念一下吧。