我在中軟上課的第七天，今天上課的案例知識點有六個，下面我將一一列舉。
知識點一、精靈圖佈局：精靈圖其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。常用於導航欄圖標、列表項圖標等。
使用精靈圖的優點：
1、能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是精靈圖最大的優點，也是其被廣泛傳播和應用的主要原因；
2、能減少圖片的字節，曾經比較過多次3張圖片合併成1張圖片的字節總是小於這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
缺點：
1、在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2、精靈圖在製作的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；
製作精靈圖，可以使用Photoshop裏面的“切片工具”。
1、利用PS軟件打開目標圖片，點擊：文件-打開-目標文件。
2、選擇PS中的切片工具，快捷鍵爲K鍵。點擊一下默認爲“起點”，再次點擊默認爲“終點”，右擊出現的編輯框可以改變切片大小。使用該工具框選圖像進行分佈，切成四片，每一片右上角都會顯示切片標籤。
溫馨提示：如果想把一個圖片平均分成幾等份時，這個操作只要右擊“切片分割”就好了，可以選擇水平和垂直，將圖片平均分割，不再需要一步步切割了。
3、切片完成，接下來要建立超級鏈接。
首先切片工具選擇切片選擇工具，然後雙擊要加入超級鏈接的切片區域或者右擊“編輯切片”。其次打開你自己想要鏈接的“網絡地址”，複製下，然後黏貼到編輯框裏面就可以了
4、當切片的鏈接做好後，那就是保存圖片了。
點擊“文件”選擇“存儲爲web和設備所用的格式”，然後點擊存儲，選擇圖片格式爲“html和圖像”，存儲後文檔裏面會出現一個網頁打開的文件和一個images的文件夾。
注意事項：（1）如果切片要均勻切割的話，那麼只要直接右擊“劃分切片”就好了，這樣可以得到均等大小的切片
（2）爲了更加精確製作，建議PS操作區用座標模式，快捷鍵：Ctrl+R