首页 > 代码库 > css Tab选项卡

css Tab选项卡

2024-07-04 13:44:09   229人阅读

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>

　　


联系
我们