HTML5网页设计小案例：网页导航栏的设计

什么是导航栏，按我的理解就是位于网页顶部或者侧边一组链接或者按钮，用来指导大家找到网页的不同板块，大家可以一目了然的找到自己想看的板块内容。今天我们设计一个位于网页顶部的的导航栏。按我的生活经验来说，网页的顶部导航栏设计偏多，侧边导航栏偏设计偏少。

下面就让我们一步一步设计与实现一个网页导航栏吧。

1 网页的总体设计：尺寸与背景颜色

代码块如下：

#aa{
	width: 1050px;
	height: 800px;
	margin: 0 auto;
	text-align: center;
	background-color: #F0F8FF;
/*
 text-align: center;div大盒子居中显示
 background-color: #F0F8FF;背景颜色
 margin: 0 auto;实际效果为左右居中
 
 */	
}

代码运行效果如下：

 2 网页导航栏的实现：超链接的美化

 1）导航栏区域的设计

  介绍：在网页顶部划定一个区域，用来放置导航栏，包括尺寸与背景颜色的设计

代码块如下

#bb{
	width: 1050px;
	height: 55px;
	line-height: 50px;
	text-align: center;
	background-color: #87CEEB;
	margin: 0 auto;
	/*
	line-height: 50px;
     字体行距为50px
}*/
}

代码运行效果如下：

 2）导航栏内容的设计

介绍：导航栏本质就是超链接的集合。

代码块如下：

	
		
		
		
	
	
		

			

				首页
				商品
				分类
				会员
				售后
			
		
	

  a{
	  		text-decoration: none;
	   	 	width: 100px;
	   	 	height: 50px;
	   	 	 text-align: center;
	   	 	background-color: green;
	   	 	line-height: 50px;
	   	 	color:white;
	   	 	display: inline-block;
	  }
	  /*
	     aa{
	  		text-decoration: none;消除超链接的下划线
	   	 	width: 100px; 
	   	 	height: 50px;
	   	 	 text-align: center; 字体居中显示
	   	 	background-color: green;  背景颜色
 	   	 	line-height: 50px; 字体行距
	   	 	color:white; 字体颜色
	   	 	display: inline-block; 转换为行内块元素
	  }*/
	  
	   	 a:hover{
	   	 	background-color: indianred;
	   	 	color:#F0F8FF
	   	 }
	   	 /*
	   	  超链接鼠标悬浮改变字体颜色以及背景颜色
	   	  	 a:hover{
	   	 	background-color: indianred;
	   	 	color: #F0F8FF;
	   	 }*/

代码运行效果如下：

 

 说明：首页超链接颜色为鼠标悬停效果显示。

3 网页文本的设计：文本内容的设计与实现

代码块如下：

	
		
		
		
	
	
		

			

				首页
				商品
				分类
				会员
				售后
			
        
嗨！你来了，欢迎:
		
如果你想认识我，扫描这个二维码
		

			
		
		
拜拜
		
	

	   	 p{
	   	 	font-family: "微软雅黑";
	   	 	font-size: 24px;
	   	 	line-height: 2;
	   	 	text-align: left;
	   	 	}
	   	 /*
	   	   p{
	   	 	font-family: "微软雅黑";设置文字类型
	   	 	font-size: 24px; 设置文字的大小
	   	 	line-height: 2; 设置文字的行距
	   	 	text-align: left; 文字靠左显示
	   	 
	   	 	
	   	 }
*/
.ree{
		text-align: left;
	}   

代码运行效果图如下：

4 网页设计完整版代码

1）HTML5代码如下

	
		
		
		
	
	
		

			

				首页
				商品
				分类
				会员
				售后
			
        
嗨！你来了，欢迎:
		
如果你想认识我，扫描这个二维码
		

			
		
		
拜拜
		
	

2)CSS3代码如下：

#aa{
	width: 1050px;
	height: 800px;
	margin: 0 auto;
	text-align: center;
	background-color: #F0F8FF;
/*
 text-align: center;div大盒子居中显示
 background-color: #F0F8FF;背景颜色
 margin: 0 auto;实际效果为左右居中
 
 */	
}
#bb{
	width: 1050px;
	height: 55px;
	line-height: 50px;
	text-align: center;
	background-color: #87CEEB;
	margin: 0 auto;
	/*
	line-height: 50px;
     字体行距为50px
}*/
}
  a{
	  		text-decoration: none;
	   	 	width: 100px;
	   	 	height: 50px;
	   	 	 text-align: center;
	   	 	background-color: green;
	   	 	line-height: 50px;
	   	 	color:white;
	   	 	display: inline-block;
	  }
	  /*
	     a{
	  		text-decoration: none;消除超链接的下划线
	   	 	width: 100px; 
	   	 	height: 50px;
	   	 	 text-align: center; 字体居中显示
	   	 	background-color: green;  背景颜色
 	   	 	line-height: 50px; 字体行距
	   	 	color:white; 字体颜色
	   	 	display: inline-block; 转换为行内块元素
	  }*/
	  
	   	 a:hover{
	   	 	background-color: indianred;
	   	 	color:#F0F8FF
	   	 }
	   	 /*
	   	  超链接鼠标悬浮改变字体颜色以及背景颜色
	   	  	 a:hover{
	   	 	background-color: indianred;
	   	 	color: #F0F8FF;
	   	 }*/
	   	 p{
	   	 	font-family: "微软雅黑";
	   	 	font-size: 24px;
	   	 	line-height: 2;
	   	 	text-align: left;
	   	 	}
	   	 /*
	   	   p{
	   	 	font-family: "微软雅黑";设置文字类型
	   	 	font-size: 24px; 设置文字的大小
	   	 	line-height: 2; 设置文字的行距
	   	 	text-align: left; 文字靠左显示
	   	 	text-indent: 2 em; 首行缩进2字符
	   	 	
	   	 }
*/
.ree{
		text-align: left;
	}   	 
	

代码运行效果图如下：

 5 总结

本案例设计了一个顶部导航栏，模仿的是购物网页的导航栏内容；鼠标点击导航会出现导航栏背景颜色以及字体颜色改变的效果。网页中的“拜拜”也是一个超链接，点击有惊喜。