CSS 語法 – 設計圖形按鈕選單 – 入門篇【二】

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

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

CSS 語法 - 網頁設計  - CSS 語法 - 設計圖形按鈕選單 - 入門篇【二】 - LImenu_02


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

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

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

CSS 語法 - 網頁設計  - CSS 語法 - 設計圖形按鈕選單 - 入門篇【二】 - LImenu_01

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

CSS 語法 - 網頁設計  - CSS 語法 - 設計圖形按鈕選單 - 入門篇【二】 - LImenu_02

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

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

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

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , , .

迴響已被關閉。