选项卡这样写更灵活 - jerrylsxu
程序员文章站
2022-05-14 20:48:22
...
同样的html代码结构 配合不同的css代码 展示不一样的效果。 |
html基本结构
|
1
2
3
4
5
6
7
8
9
10
|
ul>
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;
} |
效果如下