CSS 排版教學 – 設計圖形按鈕選單 – 入門篇【二】

接續上一篇 CSS 語法 – 設計圖形按鈕選單 – 入門篇【一】 再讓同學練習一次

同樣的 <ul> <li> 項目清單結構，同樣的 CSS 基本語法，就可以做出不同的變化與創意。

設計圖形按鈕選單，在 HTML 的內容結構上，大部份都會使用 <ul> <li> 項目清單，在結構上非常的簡潔，在編排上可以非常的靈活。因此，不只是 設計按鈕選單，有很多的 CSS 網頁排版技巧，也是一致十分愛用 <ul> <li> 項目清單來製作。

這個範例很簡單，使用 CSS 基本語法，就可以將 <ul> <li> 項目清單變成圖形按鈕選單，初學者可以透過這個範例學會 CSS 排版的入門技巧。

原始 HTML 網頁外觀~如下圖↓

套用 CSS 語法之後的 HTML 網頁外觀~如下圖↓

範例預覽 http://www.flycan.com/flycancss/LImenu.html

範例下載 http://www.flycan.com/flycancss/LImenu.zip

CSS 語法說明請參考上一篇  CSS 語法 – 設計圖形按鈕選單 – 入門篇【一】  感謝您

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！