当前位置：Gxlcms > html代码 > 选项卡这样写更灵活-jerrylsxu

选项卡这样写更灵活-jerrylsxu

时间：2021-07-01 10:21:17 帮助过：37人阅读

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

html基本结构

<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

.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

.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

.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

.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

人气教程排行