导航栏的多样设置简单实例

css样式

1. *{   
2.      margin:0px;   
3.      padding:0px;   
4.   }   
5.      .nav{   
6.         border-bottom:1px solid #c0c0c0;   
7.         width:1000px;   
8.         height:60px;   
9.         margin-left:40px;   
10.         //background-color:#c3ffdd;   
11.         }   
12.            
13.       ul li{   
14.        list-style-type:none;   
15.        width:120px;   
16.        float:left;   
17.         
18.      }   
19.       li a{   
20.             display:block;   
21.             text-decoration:none;   
22.         color:black;   
23.         font-family:"微软雅黑";   
24.         text-align:center;   
25.         line-height:60px;      
26.      }   
27.      li a:hover,li a:active{   
28.          color:#f00;   
29.      }   
30.      li a:focus{   
31.         border-bottom:2px solid #f00;  
32.  }
     

效果图

以上这篇导航栏的多样设置简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。

原文地址：http://www.cnblogs.com/king-ying/archive/2016/05/19/5509276.html