欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-30 15:21:54
...
HTML中标签的用法很多,本文为大家推荐一篇标签栏的几种实现方法,对学习标签知识很有用,希望能帮助到大家。

标签页:分类 + 描述

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

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



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

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;}


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

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;}


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

四、脚本实现


JavaScript Code复制内容到剪贴板


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

即简洁又很实用,大家学会了吗?赶紧动手操作一下吧。

相关推荐:

html img标签的使用

HTML5新增标签使用方法

html常用的格式标志标签

以上就是HTML中标签栏的几种实现方法的详细内容,更多请关注其它相关文章!