滑動門：根據(jù)文本自適應(yīng)大小，根據(jù)背景的層疊性制作，并允許他們在彼此之上進(jìn)行滑動，以創(chuàng)造出一些特殊的效果。

滑動門有兩個部分：

li -- 左邊固定不動的部分，背景左對齊

a -- 右邊隨著內(nèi)容變寬的部分，背景右對齊

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）也稱精靈圖

由來：因為網(wǎng)頁上有可能有很多小的圖片用來做效果，頁面上每一張圖片都會需要向服務(wù)器請求一次，服務(wù)器壓力很大。把小圖集合在一張大圖上，將來用到的時候，一次性把小圖全都拿過來，這樣就會減輕服務(wù)器的壓力。

雪碧圖的使用：用大圖作為背景圖片，再使用background-position屬性控制要顯示的區(qū)域。

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

網(wǎng)頁布局的思路

1、 在我們要開始做一個頁面的時候，要首先搭建好目錄，在一個大的文件夾里面要有css文件夾，image文件夾，如果頁面較多建議再建立一個html的pages文件夾，還有js文件夾等等，這樣做的主要目的是為了實現(xiàn)三層分離，還有就是便于代碼的管理，也便于后期的維護(hù)，嚴(yán)格準(zhǔn)守w3c標(biāo)準(zhǔn)。

2、 準(zhǔn)備好css初始化文件，可以先寫上要常用到的和公用代碼，后面如果有需要可以后續(xù)添加，初始化文件要獨立分開，不能和其他的css文件混合。需要使用時再引用。

3、 準(zhǔn)備好這些之后，拿到設(shè)計圖，要開始分析頁面結(jié)構(gòu)，一般是縱向排列，像是堆積木一樣一個一個的塊搭建的，不同的是頁面的搭建是從上往下。

4、 分析完成后開始搭建頁面，一塊一塊的來，在給元素使用選擇器命名的時候要有意義，這也是為了代碼的整潔和寫樣式的時候不會發(fā)生命名重復(fù)（除非是公共樣式之類的），還要定好版心，一般頁面的版心是固定的，不會改變。版心就是頁面的中間部分。

5、 頁面搭建好之后就可以開始寫css樣式了，要新建一個頁面樣式，實現(xiàn)三層分離。