首页 > 代码库 > css Tab选项卡
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="http://www.mamicode.com/#ul1">美食</a></li> <li><a href="http://www.mamicode.com/#ul2">娱乐</a></li> <li><a href="http://www.mamicode.com/#ul3">购物</a></li> <li><a href="http://www.mamicode.com/#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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。