选项卡这样写更灵活 - jerrylsxu

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

1 2 3 4 5 6 7 8 9 10 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 tab div > div id="tab2" class="tabsCont" style="display:none">Contents of the second tab div > div id="tab3" class="tabsCont" style="display:none">Contents of the third tab div > div > css代码1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 .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 ; } 效果如下

选项卡这样写更灵活 - jerrylsxu

Articles Liés