本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果。分享给大家供大家参考。具体如下：
这是一款JS+CSS打造自适应宽度的圆角滑动门，这里的圆角主要是靠一张背景图片去实现，所指的宽度是滑动门上的导航的宽度，不管文字有多少，它都会一直顺着下去，不会被内容所撑破，兼容性方面，兼容IE6/7/8,火狐未试，应该也兼容 。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/
具体代码如下：
自适应宽度的滑动门 html{filter:expression(document.execCommand("BackgroundImageCache", false, true))} body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0} ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px} a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline} .Tab{height:100%;text-align:left} .Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("images/tab_bg.gif") no-repeat left top} .Tab .title{height:30px;padding-left:10px} .Tab .title div{background-position:right top;display:block;height:100%} .Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none} .Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px} .Tab .title .n2{background-position:left -30px} .Tab .title .n2 span{background-position:right -30px} .tabcon ul{margin:5px auto;padding:0} .tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block} onmouseover事件
ASP PHP DELPHI MOOTOOLS WECLCOME TO
- Javascript 经典效果集－第二期策划中
- 老猫的理想制作w3school javascript 电子书 chm版
- 发贴需知 | 新手入门 | 常见问题 | 精华整理 0722
onclick事件
JAVA VB VC++ JQUERY NEXT WHICH ONE……
- Javascript 经典效果集－第二期策划中
- 老猫的理想制作w3school javascript 电子书 chm版
- 发贴需知 | 新手入门 | 常见问题 | 精华整理 0722
希望本文所述对大家的Javascript程序设计有所帮助。
