Tab writing is more flexible, and Tab writing is more flexible.

Tab writing is more flexible, and Tab writing is more flexible.

The same html code structure works with different css codes to demonstrate different results.

Basic html Structure

12345678910

<div id="tabs" class="tabs_right">    <ul >        <li><a Href = # tab1> local tyrants </a></li>        <li><a Href = # tab2> generation II </a></li>        <li><a Href = # tab3> rich generation </a></li>    </ul>    <div id="tab1" class="tabsCont" >Contents of first tab</div>    <div id="tab2" class="tabsCont">div>    <div id="tab3" class="tabsCont">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:0 10px;height:30px;line-height:30px;list-style:none;margin:6px 5px 0 5px;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:1px solid #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:0 10px;height:30px;line-height:30px;list-style:none;margin:6px 5px 0 5px;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:1px solid #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:0 10px;height:30px;line-height:30px;list-style:none;margin:6px 5px 0 5px;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:1px solid #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:0 10px;height:30px;line-height:30px;list-style:none;margin:6px 5px 0 5px;background-color:#d8d8d8;} .tabs_right>ul>li>a{color:#000;}

The effect is as follows: