选项卡这样写更灵活_html/css_WEB-ITnose
程序员文章站
2022-05-19 21:17:05
...
同样的html代码结构 配合不同的css代码 展示不一样的效果。
html基本结构
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;}
效果如下
推荐阅读
-
一个link标签引用多个外部样式,这样写是有什么好处吗?_html/css_WEB-ITnose
-
这样的一个问题样式怎么写?_html/css_WEB-ITnose
-
这样的导航栏,这么样写呢?_html/css_WEB-ITnose
-
这样的一个问题样式怎么写?_html/css_WEB-ITnose
-
这样写CSS,让你代码更美观_html/css_WEB-ITnose
-
css中这样写的好处是什么_html/css_WEB-ITnose
-
这样的导航栏,这么样写呢?_html/css_WEB-ITnose
-
选项卡这样写更灵活_html/css_WEB-ITnose
-
原来代码这么写 搜素引擎会更中意!_html/css_WEB-ITnose
-
这样写CSS,让你代码更美观_html/css_WEB-ITnose