实现标签栏的几种方法(推荐)

实现标签栏的几种方法(推荐)
标签页:分类+描述

Tab:分类>允许用户了解你在哪里和你要去哪里。
1。命名方法
xml代码将内容复制到剪贴板。

U3000 U3000
注意
推荐
导航
购物
U3000 U3000

标签页:标签

优点:1、容易找到2,符合SEO规范。

两。布局方法:


1)浮动:清除浮动溢出:隐藏;
2)显示:内联块IE7不兼容:*显示:内联;*变焦:1;空白:字体大小:0; /同线/边缘负价值/字母间距



三。模板代码:

1。悬停和背景颜色
CSS代码将内容复制到剪贴板。
李。服务标签{宽度:160px;高度:80px;显示:块;颜色:# 666;字体大小:32px;}
李:悬停。service-tabs1 {颜色:# 2cc185;}
。service-tabs1 li.on一{背景颜色:# 2cc185;颜色:# FFF;} / * * /背景颜色

2,小三角,明显

CSS代码将内容复制到剪贴板。
李:相对位置。service-tabs4 {;}
李:悬停。service-tabs4 {颜色:# 2cc185;}
。service-tabs4 li.on一{背景颜色:# 2cc185;颜色:# FFF;}
李。service-tabs4我{宽度:11px;身高:7px;位置:绝对的;bottombottom:- 6px;左:76px;背景:URL(图像/箭头。PNG);显示:无;}。
。service-tabs4 li.on我{显示:块;}
3、下划线标记

CSS代码将内容复制到剪贴板。
李:悬停。service-tabs2 {颜色:# 2cc185;}
。service-tabs2 li.on一{身高:78px;底部边框:2px固体# 2cc185;颜色:# 2cc185;}

四。脚本执行

Javascript代码将内容复制到剪贴板。
(function(){ $ $(){ $(服务标签ul)。Click(function(){ $(this)。AddClass(),兄弟姐妹()。RemoveClass();}))))
简洁+实用

上述标签栏的实现方法是由萧边推荐的与你分享。我们希望能给你一个参考,希望你能得到很多支持
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部