搜尋

首頁 >web前端 >html教學 >HTML中標籤列的幾種實作方法

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

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

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

標籤頁：分類   +    描述

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


#一、css命名方式：


 

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

  2. #<

    ##p
    # 

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

    > 　　

    4. <

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

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

    6. li

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

    li
  7. >

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

    8. >

  8. <a href="#nogo"

    9. >

  9. 購物

    a
  10. >

    #li# #>

  11. 　　

    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{

      2. ##.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
      上一篇：實例介紹HTML文字格式化的知識下一篇：實例介紹HTML文字格式化的知識

      相關文章

      看更多