CSS表單設計

今天咱們開始學習《十天學會web標準(div+css)》的css表單設計，包含如下內容和知識點：

• 改變文本框和文本域樣式
• 用圖片美化按鈕
• 改變下拉列表樣式
• 用label標籤提高用戶體驗

1、改變文本框和文本域樣式

若是前邊幾章學習的比較紮實的話，本節教程就至關容易了。下邊先說一下文本框，文本框和文本域都是能夠用css進行美化的。好比改變邊框精細，顏色，添加背景色、背景圖像等。請看下邊的實例：

.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}

這四個樣式表分別對應第二、三、四、5行表單，第一行是文本框的默認樣式；第二行爲設置邊框和字體顏色的樣式；第三行爲設置邊框、寬度、高度、字體大小、行高的樣式；第四行設置邊框和增長背景色和背景圖片；第五行爲增長一個gif動畫的背景圖片，看起來是否是生動許多，具體步驟再也不贅述。下面咱們看一下文本域的樣式設置：

.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}

上圖中第一個爲默認的文本域樣式，第二個爲設置邊框、寬度爲百分比、高度和景圖片。overflow:auto定義當內容不超過如今文本域高度時不出現滾動條。好了，下面運行一下代碼看看二者的效果吧

   提示：能夠先修改部分代碼後再運行

2、用圖片美化按鈕

按鈕也是網頁中常常見的元素，但默認的樣式有時候和頁面總體效果不協調，須要把它美化一下，它的樣式設置和文本框一模一樣，沒有什麼特別之處。下面以三個實例來講明一下：

.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;}

圖中的按鈕，前兩個爲固定寬度，但寬度能夠根據須要隨意調整；中間兩個爲自適應寬度，根據字數多少去適應；這四個樣式都是採用一個背景圖片橫向循環實現，因此寬度不受限制，最後一個徹底採用背景圖片，這樣寬度就得固定死了，要不會影響美觀。須要注意的是這種方式須要去掉按鈕邊框。

採用以上的按鈕有一個好處是當css樣式表沒有加載上時，將會顯示爲默認按鈕樣式，這樣用戶能夠清楚地知道這是個按鈕，正常加載後，會使按鈕更加美觀。它和咱們第五天講的css按鈕有所不一樣，那裏的按鈕實際仍是個連接，而這裏的是按鈕元素。注：不一樣瀏覽器下顯示效果略有不一樣。

   提示：能夠先修改部分代碼後再運行

3、改變下拉列表樣式

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

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

   提示：能夠先修改部分代碼後再運行

在三個瀏覽器下顯示都不盡相同，因此最好是尋求其它的辦法或者使用默認樣式了。基中IE6下被遮擋能夠把浮動層用iframe，因下拉列表不會跑到iframe上邊。有更高美化需求的能夠用div模擬來代替下拉列表，但這種方法實現起來麻煩，因爲時間關係，本節不過多的介紹這種方法，感興趣的朋友能夠參考http://www.aa25.cn/css_example/541.shtml，進一步的學習。

4、用label標籤提高用戶體驗

label標籤經常被你們忽略了，合理利用會使頁面的用戶體驗獲得提高，咱們能夠對錶單的說明文字使用label標籤，這樣當用戶點擊文字時，光標就定位到表單上了