css Tab选项卡

浏览数：18 / 时间：2015年06月09日

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>

css Tab选项卡,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css Tab选项卡