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

选项卡这样写更灵活_html/css_WEB-ITnose

程序员文章站 2022-05-19 21:17:05
...
同样的html代码结构 配合不同的css代码 展示不一样的效果。

html基本结构

Contents of first tab

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

  效果如下

相关标签: 灵活 选项卡