当前位置:Gxlcms > html代码 > HTML中标签栏的几种实现方法

HTML中标签栏的几种实现方法

时间:2021-07-01 10:21:17 帮助过:56人阅读

HTML中标签的用法很多,本文为大家推荐一篇标签栏的几种实现方法,对学习标签知识很有用,希望能帮助到大家。

标签页:分类 + 描述

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

一、css命名方式:


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


  1. <p class="service-tabs service-tabs1">


  2.   <ul class="service-tabs-inner">

  3.     <li class="on"><a href="#nogo">关注</a></li>

  4.     <li><a href="#nogo">推荐</a></li>

  5.     <li><a href="#nogo">导航</a></li>

  6.     <li><a href="#nogo">购物</a></li>

  7.   </ul>


  8. </p>




标签页:tab

优 势:1、方便查找 2、符合SEO规范

二、布局方式:

1.<ul><li> </p>
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复制内容到剪贴板


  1. .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;} /*背景颜色*/



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;bottombottom:-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{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中标签栏的几种实现方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行