所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于a的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在span中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。
参考代码：
<ul id="nav">
<li><a href=""><span>Home</span></a></li>
<li><a href=""><span>Contact us</span></a></li>
<li><a href=""><span>Web dev</span></a></li>
<li><a href=""><span>Map</span></a></li>
</ul>
说明：只要是a标签和span标签的设置，将span嵌套在a标签中，以便设置鼠标经过样式时可以使用#nav a:hover span {}来设置span内图像的变化。
具体的实现在于CSS部分：
<style type="text/css">
<!--
#nav a {
margin-left:2px
float:left
background:url(左侧图片地址) no-repeat left top
padding-left:左侧图片宽度
text-decoration:none
}
#nav a span {
display:block
background:url(file:D/img/right.jpg) no-repeat right top
padding:5px 15px 3px 6px
color:#fff
}
#nav li {
float:left
display:block
margin:0
padding:0
}
#nav a:hover {}
#nav a:hover span {}
-->
</style>
效果图：
单纯CSS实现滑动效果有两种方式：1、hover伪类 2、锚点(html+css)使用:hover伪类
标签元素css样式中设置一个位置，伪类中设置另一个位置，当鼠标经过时，css发生变化，由此实现滑动门效果
使用锚点
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。由此达到滑动门效果。
