选项卡这样写更灵活

同样的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 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

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

　　效果如下

转载于:https://www.cnblogs.com/zjBoy/p/3733632.html