滑动门技术

　　记得去年的时候就接触过滑动门技术，好久好久不用了就忘掉了、、今天突击复习突然看见了，在这里简述一下。

　　滑动门技术，顾名思义就像一个滑动门一样，它经常被用作网站导航条设计；这项技术的大概意思就是为一个标签添加背景，无论这个标签的文字长度有多长都会随着文字长度的增长而增长。

　　对于此项技术我觉得可以分为两种，一种是背景是纯色的，当然这种情况利用的不太多，但是比较简单；第二种是背景不是纯色，是许多颜色紧密联系的。首先我们先来看看通常情况下滑动门技术应该怎么做。

　　

<ul id = "nav">
    <li><a href = "#"><span>首页</span></a></li>
</ul>

　　这里为了方便我就插入了一个标签按钮；为了达到我们的目的，我们首先为a元素添加一些样式，目的是将左侧的图片当做背景插入进去

#nav li a {    
    display:block;
    background:url(左侧背景图片地址) no-repeat left top ;
    padding-left:10px;　　/*此处将span标签右移10px宽度，因为这里假设你要在页面上必须保留的那部分图片长度就是10px*/
}

　　然后，在为span设置样式，同上。

#nav li a span {    
    display:block;
    background:url(右侧图片地址) no-repeat right top ;
    padding-right:10px;
}

　　这样文字就和右侧的图片分离了10px，这样简易的滑动门就做好了，背景就会随着文字长度的增长而增长了。

　　刚才说过有两种方案，一种背景是纯色的，一种不是纯色的，不是纯色的我们就只能乖乖的按照滑动门原理写代码了，对于纯色背景图片，我们可以再图片上做一点手脚，使页面加载的图片大小稍稍改小一点

　　我们在刚才的滑动门方案上background属性后再加上背景图片的颜色rgb值，这样文字部分的背景就不在是一张图片了，这里我们可以再span上加也可以在a标签上加，都无所谓，因为我们已经设置了padding属性，无论在哪里设置都没有影响。