接續上一篇 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 語法 – 設計圖形按鈕選單 – 入門篇【一】 感謝您
by
姜智豪
老師
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!