滑动门：根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。

滑动门有两个部分：

li -- 左边固定不动的部分，背景左对齐

a -- 右边随着内容变宽的部分，背景右对齐

li { float: left; height: 33px; line-height: 33px; padding-left: 14px; background: url("weixin.png") left -192px;}

a { float: left; height: 33px; padding-right: 14px;background: url("weixin.png") right -192px;}

li:hover {background-position: left -144px;} li:hover a { background-position: right -144px; }

雪碧图（sprite）也称精灵图

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

雪碧图的使用：用大图作为背景图片，再使用background-position属性控制要显示的区域。

.btn { width: 86px; height: 34px; background: url("qq.png") no-repeat -350px -110px;}

1、在我们要开始做一个页面的时候，要首先搭建好目录，在一个大的文件夹里面要有css文件夹，image文件夹，如果页面较多建议再建立一个html的pages文件夹，还有js文件夹等等，这样做的主要目的是为了实现三层分离，还有就是便于代码的管理，也便于后期的维护，严格准守w3c标准。

2、准备好css初始化文件，可以先写上要常用到的和公用代码，后面如果有需要可以后续添加，初始化文件要独立分开，不能和其他的css文件混合。需要使用时再引用。

3、准备好这些之后，拿到设计图，要开始分析页面结构，一般是纵向排列，像是堆积木一样一个一个的块搭建的，不同的是页面的搭建是从上往下。

4、分析完成后开始搭建页面，一块一块的来，在给元素使用选择器命名的时候要有意义，这也是为了代码的整洁和写样式的时候不会发生命名重复（除非是公共样式之类的），还要定好版心，一般页面的版心是固定的，不会改变。版心就是页面的中间部分。

5、页面搭建好之后就可以开始写css样式了，要新建一个页面样式，实现三层分离。