1、垂直导航栏

index.html

1  2  3  4 
      5  6      
      7  8  9      
     
      10         
      
导航1
11         
      
导航2
12         
      
导航3
13         
      
导航4
14      
     
15 16 

 

css：

1 ul{ 2     list-style-type: none;/*去掉前面的实心圆*/ 3     margin:0px; 4     padding:0px; 5 } 6 a:link,a:visited{
   /*去掉下滑线*/ 7     text-decoration: none; 8     display:block; 9     background-color: burlywood;10     color:aliceblue;11     width:100px;12     text-align: center;13 }14 a:active,a:hover {
   /*鼠标放上去的设置*/15     background-color: red;16 }

 

效果：

 

2、水平导航栏

css代码：

1 ul{ 2     list-style-type: none;/*去掉前面的实心圆*/ 3     margin:0px; 4     padding:0px; 5     background-color: burlywood; 6     width:460px; 7     text-align:center; 8 } 9 a:link,a:visited{
   /*去掉下滑线*/10     text-decoration: none;11     background-color: burlywood;12     color:aliceblue;13     width:100px;14     text-align: center;15 }16 a:active,a:hover {
   /*鼠标放上去的设置*/17     background-color: red;18 }19 li{20     display:inline;/*水平摆放*/21     padding:3px ;22     padding-left:5px;23     padding-right:5px;24 }