大家好，在上一次飛肯教學文中，所提到的「CSS Sprite」語法技巧，不知道各位都練習過了嗎？(如果有新同學加入的話，請參考右邊的這個教學文網址： http://www.flycan.com/article/css/css-icon-sprite-1938.html)
延續上次的主題，今天我們再來做一個也很實用的「條例式按鈕」語法練習，也就是大家常常見到、用來取代表格排版的「 <ul> 、<li> – 項目清單」；在這篇教學文中，我們會先做一次一般版本的寫法，接著，我們就會教大家如何使用「CSS Sprite」技巧，讓自己的網頁更為精簡、優化喔~
底下，就請跟著我們的教學文步驟，一起來練功吧~
【步驟一】 新建一個 HTML 頁面
如下方圖示，先開啟一個 HTML 頁面，使用<ul>及<li>標籤，建立數個用超連結(此範例中是以不同課程名稱來命名)所建構而成的項目清單。
【步驟二】 附加外部CSS樣式表
先新增一個 CSS 樣式表(名稱為”MAIN.css”)，附加在剛剛建立的 HTML 網頁中；
並且，在項目清單的 <li>標籤中，使用 class 選取器(分別命名為”PS”、”DW”、”FL”、”AS”、”HC”)，如下方圖示。
【步驟三】CSS語法部分 – 一般版本寫法
接下來，開啟剛剛建立的 “MAIN.css” ，我們要來編寫主要的 CSS 語法部分。
首先，從 ul 跟 li 的語法開始，大家可以參照下方圖示的解說：
(需特別注意的是，”水平排列”的 CSS 語法一定要記得寫在 li 標籤上喔~)
接下來，使用事先準備好的按鈕圖片，做滑鼠變換前、後的語法編寫：
(如圖示，記得要先將超連結改為區塊模式；然後使用 “background-position” 的屬性，來做按鈕圖片的位置變換。)
完成”PS”的部分之後，其他4個超連結都依此類推，除了需要各自套用不同的按鈕圖片之外，其餘的寫法是一樣的。
以上，
就完成了一般版本的條例式按鈕語法練習。
【步驟四】 CSS Sprite 優化版本
當同學熟悉了一般版本的 CSS 語法之後，
從這個步驟開始，
我們要來教各位直接使用「 CSS Sprite 」技巧，把剛剛的條例式按鈕語法精簡化。
首先，
將所有使用到的按鈕圖片( btn01.jpg ~ btn05.jpg )全部合併成一張(如下方圖示，並另存新檔為 “menu.jpg” )：
ul 跟 li 兩個標籤的 CSS 語法與一般版本是相同的(請參考步驟三之圖示1)；
但由於圖片合併的關係，所以每個超連結要改為統一套用同一張背景。
→ li a { background-image:url(menu.jpg); }
另外，此步驟中最重要的，就是將 “background-position” 改為座標寫法(如下圖)；至於X、Y軸座標的設定，請各位同時參照上面那張 “menu.jpg” 的圖示說明喔。
以上，只要把所有座標位置正確寫上之後，就可大功告成囉。
寫到這邊，不知道各位同學發現了沒？
原本要70行才能寫完的長篇語法，用了 Sprite 技巧之後，只需要用一半的行數就可以整篇打完，是不是太神奇啦!傑克~
雖然，最後呈現在瀏覽器上面的結果是一模一樣的，但是，這個 CSS Sprite 技巧不僅可優化網頁，又能為自己的專業度加分，請大家一定要把這招好好學起來喔！
(小編也要努力用功去囉~ See you ! ^_^ )
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！