热门关键字：
jquery > jquery教程 > div+css > 滑动门真正的魅力之导航tab选项卡

滑动门真正的魅力之导航tab选项卡

3013
作者：管理员
发布时间：2012/7/23 21:46:30
评论数：1
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=10

 

滑动门真正的魅力之——导航/tab选项卡


样式代码如下：
  1. #nav{width:950px; background:url(navbg.png) left top repeat-x; height:34px;}   
  2. #nav ul{background:url(navbg.png) right top no-repeat; height:34px; line-height:34px; padding-left:10px;}   
  3. #nav ul li{float:left; padding:0 5px; background:url(navbg.png) left -46px no-repeat;}   
  4. #nav ul li.first{background:none;}   
  5. #nav ul li a,#nav ul li span{float:left; height:34px; line-height:34px;}   
  6. #nav ul li a{padding-right:15px;}   
  7. #nav ul li a span{padding-left:15px; cursor:pointer;}   
  8. #nav ul li a:link,#nav ul li a:visited{font-size:14px; color:#fff; font-weight:bold; text-decoration:none;}   
  9. #nav ul li a:hover{background:url(navbg.png) right -45px no-repeat;}   
  10. #nav ul li a:hover span{background:url(navbg.png) -390px -45px no-repeat;}   
  11. #nav ul li.current a,#nav ul li.current a:hover{background:url(navbg.png) right -90px no-repeat; color:#F03;}   
  12. #nav ul li.current a span,#nav ul li.current a:hover span{background:url(navbg.png) -390px -90px no-repeat; line-height:normal; padding-top:11px; height:23px;}   
  13. #nav ul li.current a:link,#nav ul li.current a:visited{ color:#F03;}  
 
HTML代码如下：
  1. <div id="nav">  
  2.     <ul>  
  3.         <li class="current first"><a href="#"><span>漫画</span></a></li>  
  4.         <li><a href="#"><span>网友插件分享</span></a></li>  
  5.         <li><a href="#"><span>漫画原创插件分享</span></a></li>  
  6.         <li><a href="#"><span>网友插件分享</span></a></li>  
  7.         <li><a href="#"><span>漫画原创插件分享</span></a></li>  
  8.         <li><a href="#"><span>网友插件分享</span></a></li>  
  9.         <li><a href="#"><span>漫画原创插件</span></a></li>  
  10.     </ul>  
  11. </div>  
 
背景图片如下：
 
效果如下
 
 




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：滑动门真正的魅力之导航tab选项卡
友荐云推荐