語軒閣: CSS 語法教學 – 設計圖形按鈕選單

2012年2月8日星期三

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

繼上一篇「CSS 語法教學 – 設計圖形按鈕選單 – 入門篇【一】」教同學使用「項目清單」製作圖形按鈕，這裡我們再來一篇，同樣算是入門的 CSS 語法教學範例，再讓同學多練習一次使用「項目清單」製作圖形按鈕。

「項目清單」就是 <ul> 和 <li> 這兩個 HTML 標籤，在 CSS 排版中最常使用的就是「項目清單」，在結構上非常的簡潔，在編排上可以非常的靈活。

首先~ 網頁部份 HTML 標籤，如下：

<ul>
<li><a href="#">飛肯設計學苑</a></li>
<li><a href="#">Photoshop課程</a></li>
<li><a href="#">Dreamweaver課程</a></li>
<li><a href="#">Flash課程</a></li>
<li><a href="#">CSS課程</a></li>
</ul>

網頁部份預覽，如下：

CSS語法，如下：

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; /* 設定滑鼠摸到超連結區塊的文字顏色 */
}