滑动门(Sliding Doors) ，它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现，如图1。
 |
| 图1 CSS滑动门技术图示 |
www.goodsgy.com
滑动门一般用做网站Tab导航， 根据Tab中内容的长短自动缩放Tab的效果，如图2。
www.goodsgy.com
 |
| 图2 网页Tab导航 |
www.goodsgy.com
前面所述的圆角矩形只是它的一种实现方式而已. 真正的滑动门只需要2组标签就可以完成: www.goodsgy.com
HTML代码如下: www.goodsgy.com
<ul> <li><a href=http://www.xxx.com title="">网站名称</a></li> </ul> www.goodsgy.com
CSS代码大致如下:
#header li {
float:left;
background:url("left_both.gif")no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
background:url("right_both.gif")no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
} |
www.goodsgy.com
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=link}