标签栏的几种实现方法(推荐)

标签页：分类    +    描述

标签栏：分类 =>让用户明白自己在哪里，将要去哪里

一、css命名方式：

 
 XML/HTML Code  复制内容到剪贴板 

 
       <  div     class  =  "service-tabs service-tabs1"  >       
          
      　　  <  ul     class  =  "service-tabs-inner"  >      
      　　　　  <  li     class  =  "on"  >  <  a     href  =  "#nogo"  >  关注  </  a  >  </  li  >      
      　　　　  <  li  >  <  a     href  =  "#nogo"  >  推荐  </  a  >  </  li  >        
      　　　　  <  li  >  <  a     href  =  "#nogo"  >  导航  </  a  >  </  li  >        
      　　　　  <  li  >  <  a     href  =  "#nogo"  >  购物  </  a  >  </  li  >        
      　　  </  ul  >      
          
        </  div  >      
          
 



标签页：tab
优 势：1、方便查找 2、符合SEO规范
  二、布局方式：  
1.<ul><li> </div>
1) float：清浮动 overflow:hidden;/伪类:after/ 
2) display:inline-block IE7不兼容：*display:inline;*zoom:1; 空白间隔 ： font-size:0;/同一行/margin负值/letter-spacing 
2.<table>
  三、模板代码：  
 1、悬停加背景色

 
 CSS Code  复制内容到剪贴板 

 
       .service-tabs li a{  width  :  160px  ;  height  :  80px  ;  display  :  block  ;  color  :  #666  ;  font-size  :  32px  ;}       
      .service-tabs1 li a:hover{  color  :  #2CC185  ;}      
      .service-tabs1 li.on a{  background-color  :  #2CC185  ;  color  :  #fff  ;}   /*背景颜色*/      
 



 
2、小三角，明显
 
 CSS Code  复制内容到剪贴板 

 
       .service-tabs4 li{  position  :  relative  ;}      
      .service-tabs4 li a:hover{  color  :  #2CC185  ;}     
      .service-tabs4 li.on a{  background-color  :  #2CC185  ;  color  :  #fff  ;}     
      .service-tabs4 li i{  width  :  11px  ;  height  :  7px  ;  position  :  absolute  ;  bottom  bottom  :-  6px  ;  left  :  76px  ;  background  :  url  (images/arrow.png);  display  :  none  ;}     
      .service-tabs4 li.on i{  display  :  block  ;}     
 


 
3、下划线标注
 
 CSS Code  复制内容到剪贴板 

 
       .service-tabs2 li a:hover{  color  :  #2CC185  ;}      
      .service-tabs2 li.on a{  height  :  78px  ;  border-bottom  :  2px     solid     #2CC185  ;  color  :  #2CC185  ;}     
 


 
 
  四、脚本实现  
 
 JavaScript Code  复制内容到剪贴板 

 
       $(  function  (){ $(  ".service-tabs ul li"  ).click(  function  () { $(  this  ).addClass(  "on"  ).siblings().removeClass(  "on"  ); }); })      
          
 


  简洁  +  实用  
以上这篇标签栏的几种实现方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

      
查看更多关于标签栏的几种实现方法(推荐)的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37463