选项卡这样写更灵活

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

html基本结构

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

css代码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;}

　效果如下

css代码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;}

效果如下

　css代码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;}

　　效果如下

css代码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;}

　　效果如下