标签栏的几种实现方法(推荐)
导读:收集整理的这篇文章主要介绍了标签栏的几种实现方法(推荐 ,觉得挺不错的,现在分享给大家,也给大家做个参考。 标签页:分类 + 描述标签栏:分类 =>让用户明白自己在哪里,将要去哪里一、css命名方式: XML/H...
收集整理的这篇文章主要介绍了标签栏的几种实现方法(推荐),觉得挺不错的,现在分享给大家,也给大家做个参考。 标签页:分类 + 描述
标签栏:分类 => 让用户明白自己在哪里,将要去哪里
一、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、悬停加背景色
- .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复制内容到剪贴板@H_523_406@- .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; bottombottom:-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"); } ); } )
简洁 + 实用
以上这篇标签栏的几种实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 标签栏的几种实现方法(推荐)
本文地址: https://pptw.com/jishu/588324.html