css-滑动门由浅入深

滑动门，简单介绍下，这个技术用到div和css就可以完成不需要JavaScript，操作起来更简单

也很实用，通常用在导航背景，根据内部文本自适应大小可以随意改变大小

再说下精灵图（sprite）：因为网页上有可能有很多小的图片用来做效果，页面上每一张图片都会需要向服务器请求一次，服务器压力很大。把小图集合在一张大图上，将来用到的时候，一次性把小图全都拿过来，这样就会减轻服务器的压力。

两个例子说明一下滑动门的应用

简单：

效果：

分析：这个用到的图片分别为    01l.png    01r.png   01m.png，左 中 右的组成

               

中间的图片作为背景平铺显示（repeat），用一个盒子包这三个盒子，而且不用定义每个盒子的宽度，宽度会随文字而改变

用左浮的效果是三个盒子水平排列，拼接而成就是我们需要的样式了

 

复杂：

效果：

  鼠标滑过： 变成蓝色

分析：1.注意：一个标签不能转换图片也就是不能一个标签就改变两张图片，所以这个思路就是用两个标签分别控制两张图片

用到的图片

分别用a标签控制左边半圆，span标签控制右边（注意：右边图片不只是长方形还有个缺角，所以放置的时候要和文档流的方向相反，从右放置即可）

01bg_r1_c2.png             01bg_r1_c2.png

鼠标滑动后：

01blue_r1_c1.png        01blue_r1_c2.png

1.初始化：

       

2.左边半圆不需要平铺no-repeat，需要设置a的高度（display），为了文字和左边半圆有一定距离设置一个padding-left

3.span放置水平图片，需要平铺，再设置图片和文字右边的距离padding-right（根据字来调整）文字居中显示：行高和高度一致