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

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

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

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

 

首先~ 網頁部份 HTML 標籤,如下:

CSS 語法 - 網頁設計  - CSS 語法教學 - 設計圖形按鈕選單 - 入門篇【二】 - flycan-ui-li

網頁部份預覽,如下:

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

 

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

 

完成後網頁預覽,如下:

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

 

範例下載:

http://www.flycan.com/myimg/modules/newbb/dl_attachment.php?attachid=1238009145&post_id=46

 

使用「項目清單」製作圖形按鈕之後,圖形按鈕是呈現上下重直排列的形態,如下圖:

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

如果想要讓「項目清單」製作的圖形按鈕變成水平方向排列的話,可以在 CSS 語法對 li 調整,如下:

li { float:left; }

 

完成後,如下:

CSS 語法 - 網頁設計  - CSS 語法教學 - 設計圖形按鈕選單 - 入門篇【二】 - speedy_03%7E0

範例下載:

http://www.flycan.com/myimg/modules/newbb/dl_attachment.php?attachid=1238010552&post_id=47

 

 

by
姜智豪
老師

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

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

迴響已被關閉。