The tab is more flexible to write

同样的html代码结构 配合不同的css代码 展示不一样的效果。

HTML BASIC structure

12345678910

<divid="tabs" class="tabs_right">    <ul>        <li><ahref=#tab1>土豪</a></li>        <li><ahref=#tab2>官二代</a></li>        <li><ahref=#tab3>富二代</a></li>    </ul>    <div id="tab1" class="tabsCont" >Contents of first tab</div>    <divid="tab2" class="tabsCont" style="display:none">Contents of the second tab</div>    <divid="tab3" class="tabsCont" style="display:none">Contents of the third tab</div></div>

CSS Code 1

123456789101112131415161718192021222324

.tabs{    width:400px;    height:auto;}.tabs>ul{width:100%;height:auto;background-color:#ededed;padding:0;height:36px; }.tabs>ul>li{float:left;padding:010px;height:30px;line-height:30px;list-style:none;margin:6px5px05px;background-color:#d8d8d8;}.tabs>ul>li>a{color:#000;}

The effect is as follows

CSS Code 2

123456789101112131415161718192021222324252627282930

.tabs_bottom{    width:400px;    height:auto;    border:1pxsolid#ededed;    min-height:200px;    position:relative;}.tabs_bottom>ul{    width:100%;    height:auto;    background-color:#ededed;    padding:0;    margin:0;    height:36px;    position:absolute;    bottom:0; }.tabs_bottom>ul>li{float:left;padding:010px;height:30px;line-height:30px;list-style:none;margin:6px5px05px;background-color:#d8d8d8;}.tabs_bottom>ul>li>a{color:#000;}

The effect is as follows

　

CSS Code 3

123456789101112131415161718192021222324252627282930313233

.tabs_left{    width:400px;    height:auto;    border:1pxsolid#ededed;    min-height:200px;}.tabs_left>ul{    float:left;    width:100px;    height:auto;    background-color:#ededed;    padding:0;    margin:0;}.tabs_left>.tabsCont{    float:left;}.tabs_left>ul>li{padding:010px;height:30px;line-height:30px;list-style:none;margin:6px5px 05px;background-color:#d8d8d8;}.tabs_left>ul>li>a{color:#000;}

The effect is as follows

CSS Code 4

123456789101112131415161718192021222324252627282930313233

.tabs_right{    width:400px;    height:auto;    border:1pxsolid#ededed;    min-height:200px;}.tabs_right>ul{    float:right;    width:100px;    height:auto;    background-color:#ededed;    padding:0;    margin:0;}.tabs_right>.tabsCont{    float:right;}.tabs_right>ul>li{padding:010px;height:30px;line-height:30px;list-style:none;margin:6px5px05px;background-color:#d8d8d8;} .tabs_right>ul>li>a{color:#000;}

The effect is as follows

The tab is more flexible to write