标签：
运行效果：
*首页是固定下面有一个蓝色的横线，其他超链接是鼠标以上去显示下方的横线。
前台代码：
1 <div class ="nav"> 2 <ul> 3 <li><a href ="#"><span class ="fixed">首 页</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 }
标签：
原文地址：http://www.cnblogs.com/KTblog/p/4279487.html
