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

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

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

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

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


原始 HTML 網頁外觀~如下圖 ↓
CSS 語法 - 網頁設計  - CSS 語法教學 - 設計圖形按鈕選單 - 入門篇【一】 - css_menu_00_516


CSS 語法 ~如下 ↓

  #MENU {  /*在條例項目之外用一個 div 區塊包起來*/   
      width: 720px;  /*設定 div 區塊寬度為720px*/
    margin:0 auto;  /*將 div 區塊置中*/ 
  } 

  ul{
   list-style-type: none;  /*將條例項目左邊的黑點取消*/
   margin: 0;  /*將條例項目的外邊界設定為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);   /*設定滑鼠摸到超連結時會改變背景圖片*/ 
  }

 

套用 CSS 語法之後的 HTML 網頁外觀~如下圖↓
CSS 語法 - 網頁設計  - CSS 語法教學 - 設計圖形按鈕選單 - 入門篇【一】 - css_menu_01_211

範例下載 http://www.flycan.com/board/download.php?id=856

 

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

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

迴響已被關閉。