css Tab选项卡

css tab 选项卡据说有2中实现方式

1. target css3

2。描点

2的核心原理是利用描点显示问题（描点父级 overflow）。

 <style>body,div,ul,li{margin:0; padding:0; font-size:12px;}.tab_ul{ margin:10px auto 0;padding-left:20px;width:228px;height:31px;border:1px solid #DBA4E8;border-bottom:0;}.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}.tabDiv{ margin:0 auto; width:248px; height:200px;border:1px solid #DBA4E8; border-top:0; overflow:hidden;}.tabDiv ul{ margin:0 auto 0; padding-top:10px; width:218px; height:190px;}.tabDiv ul li{ height:24px; text-align:right; color:#666666; font-size:12px;}</style><ul class="tab_ul"><li><a href="#ul1">美食</a></li><li><a href="#ul2">娱乐</a></li><li><a href="#ul3">购物</a></li><li><a href="#ul4">住宿</a></li>
</ul>
<div class="tabDiv"><ul id="ul1"><li>11111111111111111</li></ul><ul id="ul2"><li>2222222222222</li></ul><ul id="ul3"><li>333333333333</li></ul><ul id="ul4"><li>4444444444</li></ul>
</div>

转载于:https://www.cnblogs.com/iyueyao/p/3729384.html

css Tab选项卡相关推荐

Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
简洁css竖型tab选项卡(用)
1. 以下是程序代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
如何用html实现选项卡切换,Css如何实现tab选项卡切换
Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为[#tab1:target,#tab2:target,#tab3:target{z-index:1;} ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）
效果图 tab.html <!DOCTYPE html> <html lang="zh-CN"> <head ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

css Tab选项卡

css Tab选项卡相关推荐

最新文章

热门文章