欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

选项卡这样写更灵活 - jerrylsxu

程序员文章站 2022-04-30 11:41:47
...
同样的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 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

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;
}

 效果如下

选项卡这样写更灵活 - jerrylsxu

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;
}

效果如下

选项卡这样写更灵活 - jerrylsxu 

 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;
}

  效果如下

选项卡这样写更灵活 - jerrylsxu

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