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>
原文地址:http://www.cnblogs.com/iyueyao/p/3729384.html