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>

css Tab选项卡的相关教程结束。