导航栏_2

运行效果：

*首页是固定下面有一个蓝色的横线，其他超链接是鼠标以上去显示下方的横线。

前台代码：

 1 <div class ="nav">
 2                 <ul>
 3                     <li><a href ="#"><span class ="fixed">首&nbsp;&nbsp;页</span></a></li>
 4                     <li><a href ="#">互联网</a></li>
 5                     <li><a href ="#">国内</a></li>
 6                     <li><a href ="#">国际</a></li>
 7                     <li><a href ="#">科技</a></li>
 8                     <li><a href ="#">游戏</a></li>
 9                 </ul>
10         </div><!--nav end.-->

使用的CSS样式：

 1 /*总体设置*/
 2 * {
 3     margin:0;
 4     padding:0;
 5 }
 6 
 7 /*总体上对 a标签 进行设置*/
 8 a:link, a:visited {
 9     text-decoration:none;
10     color:#202020;
11 }
12 a:hover, a:active {
13     text-decoration:none;
14     color:#B81D18;
15 }
16 
17 /*导航栏*/
18 .nav {
19     width:985px;
20     height:70px;
21     margin:0 auto;
22     margin-top:20px;
23 }
24 
25 /*导航栏下的 li 标签*/
26 .nav li {
27     line-height:70px;
28     list-style-type:none;
29     float:left;    
30 }
31 
32 /*导航栏下的 li 标签下的 a 标签*/
33 .nav li a {
34     font-size:20px;
35     margin-right:60px;
36     padding-bottom:5px;
37 }
38 
39 /*导航栏下的 li 标签下的 a 标签，未点击按钮和已经点击过超链接样式*/
40 .nav li a:link, .nav li a:visited {
41     color:#202020;
42     text-decoration:none;
43 }
44 
45 /*导航栏下的 li 标签下的 a 标签，已经点击按钮和正在点击过超链接样式*/
46 .nav li a:hover, .nav li a:active {
47     color:#004687;
48     text-decoration:none;
49     border-bottom:3px solid #004687;
50 }
51 
52 /*固定第一个”首页“超链接的样式*/
53 .fixed {
54     padding-bottom:5px;
55     color:#202020;
56     border-bottom:3px solid #004687;
57 }

View Code