The tab is more flexible to write.

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

Basic html Structure

<Div id = "tabs" class = "tabs_right"> <ul> <li> <a href = # tab1> local tyrants </a> </li> 
The effect is as follows:

Css Code 2
.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
.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
.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: