2012年2月8日 星期三

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

設計圖形按鈕選單，在 HTML 的內容結構上，大部份都會使用 <ul> <li> 項目清單，在結構上非常的簡潔，在編排上可以非常的靈活。因此，不只是 設計按鈕選單，有很多的 CSS 網頁排版技巧，也是一致十分愛用 <ul> <li> 項目清單來製作。
這個範例很簡單，使用 CSS 基本語法，就可以將 <ul> <li> 項目清單變成圖形按鈕選單，初學者可以透過這個範例學會 CSS 排版的入門技巧。
CSS 設計圖形按鈕選單
原始 HTML 網頁外觀~如下圖 ↓
Open in new window
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

#MENU {　　/*在條例項目之外用一個
 
<div>區塊包起來*/
 
　　width: 720px;　　/*設定
 
<div>區塊寬度為720px*/
 
　　margin:0 auto;　　/*將
 
<div>區塊置中*/
 
}
 
ul{
 
　　list-style-type: none;　　/*將條例項目左邊的黑點取消*/
 
　　margin: 0;　　/*將條例項目的外邊界設定為０；IE和FF就會一致*/
 
}
 
li{
 
　　float: left;　　/*讓條例項目呈現水平排列*/
 
}
 
li a{
 
　　display: block;　　/*將超連結設定為區塊模式*/
 
　　width: 180px;　　/*設定超連結區塊的寬度*/
 
　　height: 40px;　　/*設定超連結區塊的高度*/
 
　　background-image: url(button_01.gif);　/*設定超連結區塊的背景圖片*/
 
　　line-height: 40px;　　/*設定超連結文字的行高*/
 
　　text-align: center; /*設定超連結文字置中*/
 
　　color: #000000;　　/*設定超連結文字的顏色*/
 
　　font-family: Arial, Helvetica, sans-serif;　/*設定超連結文字的字型*/
 
　　font-weight: bold;　　/*設定超連結文字的為粗體*/
 
　　text-decoration: none;　　/*將超連結的底線去除*/
 
　　font-size: 12px;　　/*設定超連結文字的大小*/
 
}
 
li a:hover{
 
　　background-image: url(button_02.gif);　　
    /*設定滑鼠摸到超連結時會改變背景圖片*/
 
}</div>
</div>
</div>
套用 CSS 語法之後的 HTML 網頁外觀~如下圖↓
Open in new window
範例下載 http://www.flycan.com/board/download.php?id=856

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)