問題討論區


【CSS 語法】文章精華區


【下載】 CSS 按鈕設計 - 入門教學(一)



CSS 按鈕設計 - 入門教學(一)
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
CSS 按鈕設計 - 入門教學(一)

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

原始 HTML 網頁外觀~如下圖↓
Open in new window


套用 CSS 語法之後的 HTML 網頁外觀~如下圖↓
Open in new window


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

2008/3/8 17:31
 


回復: CSS 按鈕設計 - 入門教學(一)
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
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);  /*設定滑鼠摸到超連結時會改變背景圖片*/

}

2008/3/8 17:31
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS