三种滑门技术

滑门

滑门就是不给导航部分（字体）设置宽度，宽度由字体部分自由撑开，达到一种可自由滑动的效果。

1.最早的滑动门

由三张图片结合而成，左边的图片负责左边的圆角，中间的图片负责中间导航（自由伸缩）的部分，右面的图片负责右边的圆角。

代码：

<ul><li></li> <!-- 左边圆角 --><li></li> <!-- 中间导航 --><li></li> <!-- 右边圆角 --></ul>

2.由两张图片组成的而成

左边的图片由负责左边的圆角，右面的图片是通过导航内容自动撑开图片显示大小来表示滑动效果

代码：

<li><a href="#"><span></span>  <!-- 导航栏内容 --></a></li>

3.由一张图片实现滑动门(精灵图)

将一张大的圆角背景图片，代码如上面的一样，其中li标签用来显示图片的左边（带有左边的圆角），后面的a标签可以用来放这张图片，不过这张图片在显示的时候我们显示图片的右面（用position定位）

代码：

<li><a href="#"><span></span>  <!-- 导航栏内容 --></a></li>

4.实例

网页上微信的导航栏就是用滑门技术做的。