首頁  >  文章  >  web前端  >  HTML中標籤列的幾種實作方法

HTML中標籤列的幾種實作方法

小云云
小云云原創
2017-12-11 11:33:354009瀏覽

HTML中標籤的用法很多,本文為大家推薦一篇標籤列的幾種實作方法,對學習標籤知識很有用,希望能幫助大家。

標籤頁:分類   +    描述

標籤列:分類=>讓使用者明白自己在哪裡,要去哪裡


#一、css命名方式:


 

  1. XML/HTML Code複製內容到剪貼簿

  2. #<

    ##p

    class
  3. =
  4. "service-tabs service-tabs1"

    >   

  5. <
  6. ul class="service-tabs-inner">     <li class="on"#>>

  7. >#<a href="#nogo">追蹤#a>li>    <

  8. li
  9. ><a href="#nogo ">推薦a#>##li>    <

    li
  10. >

    < a href="#nogo">導航##a>li>    < li

  11. >
  12. <a href="#nogo"

  13. >

  14. 購物

    a
  15. >

    #li# #>

  16.   

    ul
>



##p>




#「標籤頁:tab


」優點: 1.方便查找2、符合SEO規範

二、佈局方式:

1.

  • < /p>
    1) float:清浮動overflow:hidden;/偽類:after/

    2) display:inline-block IE7不相容:*display:inline;*zoom:1; 空白間隔: font -size:0;/同一行/margin負值/letter-spacing
    1. 2.

      三、範本程式碼: # 1、懸停加上背景色#CSS Code複製內容到剪貼簿

      #########.service-tabs li a{###width###:###160px###;###height# ##:###80px###;###display###:###block###;###color###:####666###;###font-size ###:###32px###;}    ###
    2. .service-tabs1 li a:hover{color:#2CC185;}    

    3. #.service -tabs1 li.on a{background-color:#2CC185;color:#fff;} /*背景顏色*/



    4. 2、小三角,明顯


      CSS Code複製內容到剪貼簿


      1. .service-tabs4 li{position:relative;}   

      2. .service-tabs4 li a:hover{ color:#2CC185;}   

      3. .service-tabs4 li.on a{#background-color:#2CC185;color:#fff;}   

      4. .service-tabs4 li i{width:11px;height:7px;position:absolute;bottom bottom:-6px;left:76px;background:url(images /arrow.png);display:none;}   

      5. .service-tabs4 li.on i{display:block;}   


      #3、底線標註


      #CSS Code複製內容到剪貼簿


      1. ## .service-tabs2 li a:hover{

        color:#2CC185;}   

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

        ;}   


       

      四、腳本實作


      JavaScript Code複製內容到剪貼簿


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

        ); } ); })   

      也就是簡潔又很實用,大家學會了嗎?趕快動手操作一下吧。


      相關推薦:

      html img標籤的使用

      HTML5新增標籤使用方法

      html常用的格式標誌標籤

      ###

      以上是HTML中標籤列的幾種實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

      陳述:
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn