您现在的位置是：网站首页> 编程资料编程资料

tab选项卡布局之利用a的一个选项形式_CSS布局实例_CSS_网页制作_

2023-11-01 231人已围观

简介 很多的选项卡都是用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_网页制作_

下一篇：UL、LI 无序列表实现纯CSS网站导航菜单_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网