您现在的位置是：网站首页> 编程资料编程资料
tab选项卡布局之利用a的一个选项形式_CSS布局实例_CSS_网页制作_
2021-09-09
933人已围观
简介 很多的选项卡都是用JS去完成的 这个效果也是之前在经典论坛看到别人使用的，很有想法记录下来
复制代码
代码如下:#Tab{width:300px;line-height:30px;overflow:hidden;}
#Tab li{float:left;width:100px;line-height:30px;text-align:center;cursor:pointer;}
#Main{width:300px;height:300px;overflow:hidden;border:1px solid #000;}
#Main ul{height:300px;}
#Main ul li{height:30px;line-height:30px;}
利用了a的功能，把Main的超出部分隐藏
html
复制代码
代码如下:- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 1111111
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
- 2222222
这样就完成了一个选项卡的功能了
思路很新颖，值得好好思考。
相关内容
- 为什么有些css样式不起作用 _CSS教程_CSS_网页制作_
- CSS 网页布局问题 li上多出的margin问题_CSS布局实例_CSS_网页制作_
- css 圆角边框 _CSS教程_CSS_网页制作_
- CSS样式表中的position属性详细说明_CSS教程_CSS_网页制作_
- 使用DIV+CSS布局网站的优点和缺陷分析_CSS布局实例_CSS_网页制作_
- 不同浏览器对CSS3和HTML5的支持状况_css3_CSS_网页制作_
- css 超过宽度的文字显示点点 _CSS教程_CSS_网页制作_
- CSS dashed和dotted的区别_CSS教程_CSS_网页制作_
- 未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF） _CSS教程_CSS_网页制作_
- css float 解析学习_CSS教程_CSS_网页制作_
