繼上一篇「CSS 語法教學 – 設計圖形按鈕選單 – 入門篇【一】」教同學使用「項目清單」製作圖形按鈕，這裡我們再來一篇，同樣算是入門的 CSS 語法教學範例，再讓同學多練習一次 使用「項目清單」製作圖形按鈕。
「項目清單」就是 <ul> 和 <li> 這兩個 HTML 標籤 ，在 CSS 排版中最常使用的就是「項目清單」，在結構上非常的簡潔，在編排上可以非常的靈活。
首先~ 網頁部份 HTML 標籤，如下：
網頁部份預覽，如下：
CSS語法，如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | ul { list-style-type:none; /* 去除項目清單的小黑點 */ margin:0; /* 清除項目清單的外間距 */ padding:0; /* 清除項目清單的內間距 */ } li a { display:block; /* 將超連結設定為區塊模式 */ width:160px; /* 設定超連結區塊的寬度 */ height:30px; /* 設定超連結區塊的高度 */ background-image:url(button.jpg); /* 設定超連結的背景圖片 */ line-height:30px; /* 設定超連結區塊的行高 */ text-indent:45px; /* 設定超連結區塊的文字內縮 */ text-decoration:none; /* 去除超連結的底線 */ color:#333333; font-size:12px; font-family:Arial; } li a:hover { background-position:left bottom; /* 設定滑鼠摸到超連結的背景圖片位置 */ color:#003366; /* 設定滑鼠摸到超連結區塊的文字顏色 */ } |
完成後網頁預覽，如下：
範例下載：
http://www.flycan.com/myimg/modules/newbb/dl_attachment.php?attachid=1238009145&post_id=46
使用「項目清單」製作圖形按鈕之後，圖形按鈕是呈現上下重直排列的形態，如下圖：
如果想要讓「項目清單」製作的圖形按鈕變成水平方向排列的話，可以在 CSS 語法對 li 調整，如下：
li { float:left; } |
完成後，如下：
範例下載：
http://www.flycan.com/myimg/modules/newbb/dl_attachment.php?attachid=1238010552&post_id=47
by
姜智豪
老師
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
