用css实现各种导航栏

基本的垂直导航条

通过HTML创建一个无序列表

	
home
	
home
	
home
	
home
	
home
	
home

利用css处理样式

结果

创建简单的水平导航条

HTML代码

	

	
		
 <

		
1
		
2
		
3
		
4
		
5
		
Next > >
	

css代码

ol.pagination{
		margin:0px;
		padding:0px;
		list-style-type:none;
	}
	ol.pagination li{
		float:left;/*浮动列表项 使用外边距把他们分开*/
		margin-right:10px;
	}

	ol.pagination a,ol.pagination li.selected{
		display: block;
		padding:5px 10px;/*控制li中的元素与li之间的距离*/
		border:1px solid #ccc;
		text-decoration:none;
	}
	/*鼠标悬停、获得焦点时 改变背景和文字的颜色*/
	ol.pagination a:hover,ol.pagination a:focus,ol.pagination li.selected{
		background-color:blue;
		color:white;
	}

	ol.pagination a[rel="prev"],ol.pagination a[rel="next"]{
		border:none;
	}

创建图形化导航栏

html代码

	
home
	
home
	
home
	
home
	
home
	
home

css代码

“滑动门”标签页式导航

HTMl代码同上

css代码

运行结果

下拉菜单

html代码

	
home
	
home
	

		
meau

		
meau

		
meau

		
meau

	

	

	
home
	
home 
	
home
	
home

css代码

运行结果

当鼠标没有悬停在第二个导航框的时候

当鼠标悬停在第二个导航框的时候

css3制作动态导航菜单

	.nav{
		  width:560px;
		  height: 50px;
		  font:bold 0/50px Arial;
		  text-align:center;
		  margin:40px auto 0;
	      background: #f65f57;
		  /*制作圆*/
		
          /*制作导航立体风格*/
          
		}
		.nav a{
		  display: inline-block;
		  -webkit-transition: all 0.2s ease-in;
		  -moz-transition: all 0.2s ease-in;
		  -o-transition: all 0.2s ease-in;
		  -ms-transition: all 0.2s ease-in;
		  transition: all 0.2s ease-in;
		}
		.nav a:hover{
		  -webkit-transform:rotate(10deg);
		  -moz-transform:rotate(10deg);
		  -o-transform:rotate(10deg);
		  -ms-transform:rotate(10deg);
		  transform:rotate(10deg);
		}

		.nav li{
		  position:relative;
		  display:inline-block;
		  padding:0 16px;
		  font-size: 13px;
		  text-shadow:1px 2px 4px rgba(0,0,0,.5);
		  list-style: none outside none;
		}
		/*使用伪元素制作导航列表项分隔线*/
		
        /*删除第一项和最后一项导航分隔线*/
		
		.nav a,
		.nav a:hover{
		  color:#fff;
		  text-decoration: none;
		}

运行结果

当鼠标放在连接上时  字体会向右倾斜十度