第九章：CSS表單設計

　　二、用圖片美化按鈕

　　按鈕也是網(wǎng)頁中經(jīng)常見的元素，但默認的樣式有時候和頁面整體效果不協(xié)調，需要把它美化一下，它的樣式設置和文本框如出一轍，沒有什么特別之處。下面以三個實例來說明一下：

　　.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}

　　.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}

　　.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}

　　.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}

　　.btn09 { background:url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}

　　圖中的按鈕，前兩個為固定寬度，但寬度可以根據(jù)需要隨意調整；中間兩個為自適應寬度，根據(jù)字數(shù)多少去適應；這四個樣式都是采用一個背景圖片橫向循環(huán)實現(xiàn)，所以寬度不受限制，最后一個完全采用背景圖片，這樣寬度就得固定死了，要不會影響美觀。需要注意的是這種方式需要去掉按鈕邊框。

　　采用以上的按鈕有一個好處是當css樣式表沒有加載上時，將會顯示為默認按鈕樣式，這樣用戶可以清楚地知道這是個按鈕，正常加載后，會使按鈕更加美觀。它和我們第五天講的css按鈕有所不同，那里的按鈕實際還是個鏈接，而這里的是按鈕元素。注：不同瀏覽器下顯示效果略有不同。

　　提示：可以先修改部分代碼后再運行

　　三、改變下拉列表樣式

　　下拉列表（菜單）是大家最頭疼的一個元素，因其對許多樣式不生效，故而在頁面中顯示很丑陋，而且在IE6下總在最上層，造成許多彈出層不能把其遮擋（可惡的IE6呀），使頁面的用戶檢驗大打折扣，所以一些設計師想出了許多辦法來改變這種情況。

　　IE6下對下拉列表的背景和寬度樣式生效，其它絕大部分不生效，IE8下增加了對邊框和高度的支持。但這樣似乎離我們要求還很遠，所以不得不尋求其它的辦法了。先看下面三個圖，同一代碼分別在IE6、FF、IE8下顯示的差異吧。