码迷,mamicode.com
首页 > 其他好文 > 详细

导航栏_2

时间:2015-02-07 22:52:44      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

 

 

运行效果:

技术分享

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

 

前台代码:

 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

 

导航栏_2

标签:

原文地址:http://www.cnblogs.com/KTblog/p/4279487.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!