Web前端开发-简单导航栏实例

 

---

HTML部分

	
		
		
		
	
	
		
		

			
		
		
		

			

				
首页导读
				
推荐版面
				
推荐文章
				
精品收藏
				
休闲娱乐
				
我的信箱
				
关于我们
			
		
		
		

	

CSS部分

@charset "utf-8";

/*网页 去除干扰边距, 默认背景*/
body {
	font-family: Arial, Helvetica, sans-serif;
	/* 12是最小的了 */
	font-size: 12px;
	background-color: #FFFFCC;
	margin: 0px;
	padding: 0px;
}

/* 列表常规操作 */
ul,
li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

/* banner的背景图 */
#div-banner {
	width: 100%;
	height: 150px;
	background-image: url(../img/banner-bg.gif);
	background-repeat: repeat-x;
}

/*导航栏的默认样式*/
#div-nav {
	width: 100%;
	height: 32px;
	background-image: url(../img/nav-bg.gif);
	background-repeat: repeat-x;
}

/*将li标签进行左浮动*/
#div-nav li {
	float: left;
}

/* 设置链接默认样式 */
#div-nav a {
	width: 80px;
	height: 32px;
	text-align: center;
	/* 垂直居中 */
	line-height: 32px; 
	color: #663600;
	font-size: 12px;
	/* 边框 */
	border-left: solid 1px white;
	/* 去下划线 */
	text-decoration: none;
	/* 行内元素改成块元素 宽度占据父 */
	display: block;
}

/* 链接获取聚集样式*/
#div-nav a:hover {
	color: white;
	font-weight: bold;
	background-color: #996633;

}