-
觸屏版
-
全國服務(wù)熱線：0571-87205688
- 云客網(wǎng)首頁
-
登錄
- |
-
注冊
- |
-
客戶中心
- |
-
關(guān)注云客
CSS表單設(shè)計(jì)-Web標(biāo)準(zhǔn)(div+css)教程
分享
評論
贊0
一、改變文本框和文本域樣式
如果前邊幾章學(xué)習(xí)的比較扎實(shí)的話，本節(jié)教程就相當(dāng)容易了。下邊先說一下文本框，文本框和文本域都是可以用css進(jìn)行美化的。比如改變邊框精細(xì)，顏色，添加背景色、背景圖像等。請看下邊的實(shí)例：
.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;}
這四個樣式表分別對應(yīng)第2、3、4、5行表單，第一行是文本框的默認(rèn)樣式；第二行為設(shè)置邊框和字體顏色的樣式；第三行為設(shè)置邊框、寬度、高度、字體大小、行高的樣式；第四行設(shè)置邊框和增加背景色和背景圖片；第五行為增加一個gif動畫的背景圖片，看起來是不是生動許多，具體步驟不再贅述。下面我們看一下文本域的樣式設(shè)置：
.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
上圖中第一個為默認(rèn)的文本域樣式，第二個為設(shè)置邊框、寬度為百分比、高度和景圖片。overflow:auto定義當(dāng)內(nèi)容不超過現(xiàn)在文本域高度時不出現(xiàn)滾動條。好了，下面運(yùn)行一下代碼看看兩者的效果吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/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:#ffeeff url(/upload/2010-08/28/icon9.gif) right 3px no-repeat;} .text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(/upload/2010-08/28/bg_9.gif) 0 0 no-repeat;} .area { border:1px solid #F90; overflow:auto; background:#fff url(/upload/2010-08/28/bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;} </style> </head> <body> <p> |
猜你喜歡
評論(0人參與，0條評論)
發(fā)布評論
最新評論