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

  #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);　　 /*設定滑鼠摸到超連結時會改變背景圖片*/ 
  }