css之滑动门总结与心得

我使用滑动门最主要的问题是解决用一张图片来实现按键或者选项卡或者菜单之类的事情。

其实网上有很多这样的例子，如果不想搞明白原理，那所那代码copy过来问题也可以解决，但是我的生病就是看到看不明白或者还有一点不能理解的东西非搞个水落石出不可

起因，看到有人写了个按键，用的是所谓的滑动门。

代码如下

<a href="#" mce_href="#"> <span>链接按钮</span> </a>  

css代码如下

a{ background:url('images/navr2-bg.gif') no-repeat scroll 0 0 transparent; height:28px; text-align: center; font-weight:600; float:left; padding-left:2px; color: #D90000; } a span{ background:url('images/navr2-bg.gif') no-repeat scroll 100% 0 transparent; line-height:28px; float:left; padding: 0 10px; } 

那张图片nav2-bg.gif

我不明白的地方

（1）为什么a要float，span也要float.

想了我半天，不明白，发现整天写代码的人对这些东西有难度，找了好几个同事给我解释，有点明白了

a float和padding-left是分不开的，不然就没法显示图片左边的border。

span float就是实现滑动的效果，这样就可以附着span内容的增加而这个按钮变长。

（2）一张图片滑动的原理就是让背景重叠，附着内容的增加而变长。