北京網站建設>前端開發>Css>

Css

【精編Css教程】9-CSS表單設計

來源:未知 作者:admin 時間:2015-10-30 16:56 點擊:

改變文本框和文本域樣式

用圖片美化按鈕

改變下拉列表樣式

用label標簽提升用戶體驗

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

如果前邊幾章學習的比較扎實的話,本節教程就相當容易了。下邊先說一下文本框,文本框和文本域都是可以用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;}

這四個樣式表分別對應第2、3、4、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定義當內容不超過現在文本域高度時不出現滾動條。好了,下面運行一下代碼看看兩者的效果吧

二、用圖片美化按鈕

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

.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按鈕有所不同,那里的按鈕實際還是個鏈接,而這里的是按鈕元素。注:不同瀏覽器下顯示效果略有不同。

公司業務:北京網站建設刷百度下拉刷百度指數虛擬主機租用

如轉載,請保留本文鏈接地址:http://www.imnrhk.live/Style/Css/1771/

Loading......
工作時間:

AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

聯系方式:

Tel 010-50933590

Hp 18701620736

設計優勢

獨立的設計團隊 帶給您全新的視覺體驗

功能開發

強大的技術實力,完成您想要的任何功能

售后服務

完善的售后服務,解決您在使用過程中遇到的問題

Copyright © 2010 - 2018 北京順晟科技發展有限公司 All Rights Reserved

地址:北京市順義區南法信政府府前街16號 炫立方 | TEL:010-50933590

北京網站建設 | 北京網站設計 | 北京SEO公司

永恒宝钻电子