首页 > 网站 > WEB开发 > 正文

选项卡这样写更灵活

2024-04-27 14:35:07
字体:
来源:转载
供稿:网友
选项卡这样写更灵活
同样的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;}

  效果如下


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表