滑動門：根據(jù)文本自適應(yīng)大小禁偎，根據(jù)背景的層疊性制作，并允許他們在彼此之上進行滑動阀坏，以創(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)三層分離桦山，還有就是便于代碼的管理，也便于后期的維護证薇，嚴格準守w3c標準度苔。
2、 準備好css初始化文件浑度，可以先寫上要常用到的和公用代碼寇窑，后面如果有需要可以后續(xù)添加，初始化文件要獨立分開箩张，不能和其他的css文件混合甩骏。需要使用時再引用。
3先慷、 準備好這些之后饮笛，拿到設(shè)計圖，要開始分析頁面結(jié)構(gòu)论熙，一般是縱向排列福青，像是堆積木一樣一個一個的塊搭建的，不同的是頁面的搭建是從上往下脓诡。
4无午、 分析完成后開始搭建頁面，一塊一塊的來祝谚，在給元素使用選擇器命名的時候要有意義宪迟，這也是為了代碼的整潔和寫樣式的時候不會發(fā)生命名重復(fù)（除非是公共樣式之類的），還要定好版心交惯，一般頁面的版心是固定的次泽，不會改變。版心就是頁面的中間部分席爽。
5意荤、 頁面搭建好之后就可以開始寫css樣式了，要新建一個頁面樣式只锻，實現(xiàn)三層分離玖像。
