十(shí)天學會web標準(zhǔn)div+css 表單(dān)設計(jì)，包含以下(xià)內容和(hé)知(zhī)識點：
一，改變文本框和文本域樣式 二，用圖片美化按鈕 三，改變下拉列表樣式 四，用label標簽提升用戶體驗
一(yī)，改(gǎi)變(biàn)文本框和文本域樣式
如(rú)果前(qián)邊幾(jī)章(zhāng)學習(xí)的比(bǐ)較紮實的話，本(běn)節(jié)教(jiào)程(chéng)就相(xiāng)當容(róng)易了。下(xià)邊先(xiān)說一下文(wén)本框(kuàng)，文本(běn)框(kuàng)和文(wén)本域都是可以用css進行(háng)美化(huà)的。比如(rú)改(gǎi)變(biàn)邊框(kuàng)精細(xì)，顏(yán)色(sè)，添(tiān)加(jiā)背(bèi)景色，背(bèi)景圖像等。請(qǐng)看(kàn)下邊(biān)的實(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;}
這(zhè)四(sì)個(gè)樣式(shì)表分別對(duì)應(yīng)第2，3，4，5行表(biǎo)單，第(dì)一行是文本(běn)框的(dí)默(mò)認(rèn)樣(yàng)式；第二行為設置(zhì)邊(biān)框(kuàng)和字體顏色的(dí)樣式；第(dì)三行(háng)為設(shè)置邊框，寬(kuān)度，高(gāo)度，字體大(dà)小，行高的樣(yàng)式(shì)；第(dì)四行(háng)設置(zhì)邊(biān)框和增(zēng)加背景色和(hé)背景圖片(piàn)；第五行(háng)為增(zēng)加一個(gè)gif動畫的(dí)背(bèi)景圖片，看(kàn)起(qǐ)來(lái)是不(bù)是生(shēng)動許多，具體步驟(zhòu)不再贅述(shù)。下麵(miàn)我(wǒ)們(mén)看(kàn)一下文(wén)本域的樣式設置(zhì)：
.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
上圖(tú)中(zhōng)第(dì)一(yī)個為(wéi)默認的文(wén)本域樣式，第二個(gè)為(wéi)設置(zhì)邊(biān)框(kuàng)，寬(kuān)度(dù)為(wéi)百分比，高(gāo)度和景(jǐng)圖(tú)片(piàn)。overflow:auto定(dìng)義(yì)當(dāng)內(nèi)容不(bù)超過現在文本域高度(dù)時不出(chū)現滾(gǔn)動(dòng)條(tiáo)。好了，下麵(miàn)運(yùn)行(háng)一(yī)下代碼(mǎ)看看兩者的效(xiào)果吧
<!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=utf-8" />
<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>
<input type="text" name="textfield" id="textfield" />
這(zhè)是(shì)默認樣(yàng)式(shì)
</p>
<p>
<input name="textfield2" type="text" id="textfield2" value="我是藍(lán)色的(dí)" />
這(zhè)是改(gǎi)變邊框的樣式和文字顏(yán)色
</p>
<p>
<input name="textfield3" type="text" id="textfield3" value="看我大(dà)吧" />
這(zhè)是改變(biàn)邊(biān)框並(bìng)設(shè)置高(gāo)寬(kuān)和字體(tǐ)大小的(dí)樣(yàng)式
</p>
<p>
<input type="text" name="textfield4" id="textfield4" />
這(zhè)是增加背(bèi)景圖片實(shí)例，也可放左(zuǒ)側(cè)
</p>
<p>
<input type="text" name="textfield5" id="textfield5" />
這(zhè)是增加(jiā)了一(yī)個背景(jǐng)圖片(piàn)為(wéi)gif動(dòng)畫
</p>
<p>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<textarea name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
</p>
</body>
</html>
提示：可以(yǐ)先修改部分(fēn)代(dài)碼(mǎ)後再(zài)運行
二(èr)，用(yòng)圖片美化(huà)按(àn)鈕(niǔ)
按(àn)鈕也是網頁(yè)中經(jīng)常(cháng)見(jiàn)的元(yuán)素，但默認的樣(yàng)式有時候(hòu)和頁(yè)麵整體(tǐ)效(xiào)果不協調(tiáo)，需要把它(tā)美化一下，它的樣式設置和文本(běn)框(kuàng)如出一轍(zhé)，沒有什(shí)麼(mó)特別(bié)之(zhī)處。下(xià)麵以(yǐ)三個(gè)實(shí)例(lì)來(lái)說(shuō)明(míng)一下：
.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.100181.com/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;}
圖(tú)中的按(àn)鈕，前兩個為固(gù)定寬度(dù)，但(dàn)寬度(dù)可以根據需(xū)要隨意調整(zhěng)；中(zhōng)間(jiān)兩個為(wéi)自(zì)適應寬(kuān)度，根據字數多(duō)少去(qù)適(shì)應；這四個(gè)樣式都(dū)是(shì)采用一個(gè)背景(jǐng)圖片(piàn)橫(héng)向(xiàng)循(xún)環實現，所以(yǐ)寬度不受限(xiàn)製(zhì)，最(zuì)後一個(gè)完全(quán)采用背景(jǐng)圖(tú)片(piàn)，這樣寬(kuān)度就(jiù)得固(gù)定(dìng)死了(liǎo)，要(yào)不會影響美觀(guān)。需(xū)要注意的(dí)是這種(zhǒng)方式(shì)需要去掉按鈕(niǔ)邊框。
采(cǎi)用以(yǐ)上的(dí)按鈕有(yǒu)一個好(hǎo)處是當(dāng)css樣式表(biǎo)沒有加載(zǎi)上時，將(jiāng)會顯示(shì)為默(mò)認按(àn)鈕樣(yàng)式(shì)，這(zhè)樣用戶可(kě)以清(qīng)楚地知道這是個按(àn)鈕，正常(cháng)加載(zǎi)後(hòu)，會(huì)使(shǐ)按鈕(niǔ)更加美(měi)觀。它和我們(mén)第(dì)五天講的css按鈕(niǔ)有(yǒu)所不同，那裏的(dí)按鈕實(shí)際還是個(gè)鏈接(jiē)，而(ér)這裏(lǐ)的(dí)是按鈕元素。注(zhù)：不同(tóng)瀏覽器(qì)下顯(xiǎn)示(shì)效(xiào)果(guǒ)略有(yǒu)不(bù)同(tóng)。
<!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=utf-8" />
<style type="text/css">
.btn02 { background:#fff url(/upload/2010-08/28/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(/upload/2010-08/28/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(/upload/2010-08/28/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(/upload/2010-08/28/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.100181.com/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;}
</style>
</head>
<body>
<p>
<input name="button" type="submit" id="button" value="提(tí)交(jiāo)" />
</p>
<p>
<input name="button2" type="submit" id="button2" value="提(tí)交" />
</p>
<p>
<input name="button" type="submit" id="button" value="提交(jiāo)" />
</p>
<p>
<input name="button2" type="submit" id="button2" value="看看我(wǒ)的(dí)寬(kuān)度有多寬" />
</p>
<p>
<input name="button" type="submit" id="button" value="免費注冊" />
</p>
</body>
</html>
提(tí)示：可(kě)以先修(xiū)改部(bù)分代碼(mǎ)後再運行(háng)
三，改變下拉(lā)列(liè)表(biǎo)樣式
下(xià)拉(lā)列(liè)表(biǎo)（菜單(dān)）是(shì)大家(jiā)最頭疼的(dí)一個(gè)元(yuán)素，因其(qí)對許(xǔ)多樣(yàng)式(shì)不生效(xiào)，故而在頁(yè)麵中顯示很醜陋，而(ér)且在(zài)IE6下總(zǒng)在(zài)最上層，造成許(xǔ)多彈出(chū)層(céng)不(bù)能把(bǎ)其遮擋(dǎng)（可(kě)惡的IE6呀(yā)），使(shǐ)頁(yè)麵(miàn)的用(yòng)戶(hù)檢(jiǎn)驗大打折扣，所以一些設計師(shī)想出了(liǎo)許(xǔ)多辦(bàn)法(fǎ)來(lái)改變這種情(qíng)況。
IE6下對(duì)下(xià)拉(lā)列表的(dí)背景(jǐng)和(hé)寬度(dù)樣式生(shēng)效，其它(tā)絕(jué)大(dà)部(bù)分不(bù)生效，IE8下增(zēng)加了對(duì)邊(biān)框和高(gāo)度的支持。但這樣似乎(hū)離我們(mén)要求還(huán)很遠，所(suǒ)以不(bù)得(dé)不尋求(qiú)其(qí)它的(dí)辦法了。先(xiān)看下麵三(sān)個圖(tú)，同一代(dài)碼分別(bié)在(zài)IE6，FF，IE8下顯示的(dí)差異吧(bā)。
<!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=utf-8" />
<style type="text/css">
.select { border:1px solid #f60; background:#FF9; height:30px;}
.tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}
</style>
</head>
<body>
<p>請選(xuǎn)擇(zé)項(xiàng)目：</p>
<p>
<select name="select" id="select">
<option>請選擇(zé)----------------</option>
<option>標準之(zhī)路(lù)</option>
</select>
</p>
<div>看看誰(shuí)能把我(wǒ)擋著(zhuó)</div>
</body>
</html>
提示：可(kě)以(yǐ)先(xiān)修改部分代碼後(hòu)再(zài)運(yùn)行
在三個(gè)瀏覽(lǎn)器下顯示都(dū)不盡相(xiāng)同，所以(yǐ)最好是尋求其它(tā)的辦法(fǎ)或(huò)者(zhě)使用(yòng)默認樣式(shì)了。基中(zhōng)IE6下被(bèi)遮(zhē)擋可以把(bǎ)浮動(dòng)層用iframe，因下(xià)拉列(liè)表(biǎo)不(bù)會跑(pǎo)到(dào)iframe上邊。有(yǒu)更高(gāo)美化需(xū)求的可(kě)以(yǐ)用div模(mó)擬(nǐ)來代替(tì)下拉列表(biǎo)，但(dàn)這(zhè)種方(fāng)法實(shí)現起來麻(má)煩，由(yóu)於時間(jiān)關係，本節不(bù)過多(duō)的介紹這種方法，感興(xīng)趣的朋友(yǒu)可以(yǐ)參考http://www.100181.com/class-8.html，進一步的學習。
四(sì)，用label標簽(qiān)提(tí)升(shēng)用戶體驗(yàn)
label標(biāo)簽常常被(bèi)大家(jiā)忽(hū)略了(liǎo)，合(hé)理利(lì)用會使頁(yè)麵的用戶體驗得到提(tí)升(shēng)，我(wǒ)們(mén)可以(yǐ)對表(biǎo)單(dān)的說明(míng)文字使用(yòng)label標簽，這樣(yàng)當用戶點(diǎn)擊文字(zì)時，光標就定位(wèi)到表(biǎo)單(dān)上(shàng)了
如上(shàng)圖，當鼠標點擊姓名(míng)文(wén)字時(shí)，光標就(jiù)會定位到(dào)後(hòu)邊(biān)的文(wén)本框(kuàng)上了；點擊男(nán)女(nǚ)文字也(yě)會選中(zhōng)相應的(dí)選(xuǎn)項；同理，復選(xuǎn)框和文本(běn)域也是(shì)一(yī)樣的。
<!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=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" />
</p>
<p>性別：
<input type="radio" name="sex" id="male" value="radio" /><label for="male">男(nán)</label>
<input type="radio" name="sex" id="female" value="radio2" /><label for="female">女(nǚ)</label></p>
<p>愛好(hǎo)：
<input type="checkbox" name="music" id="music" /><label for="music">聽(tīng)音樂</label>
<input type="checkbox" name="web" id="web" /><label for="web">上網(wǎng)</label>
<input type="checkbox" name="book" id="book" /><label for="book">看書</label></p>
<p>
<label for="content">簡(jiǎn)歷(lì)：</label>
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
<p> </p>
<p> </p>
</body>
</html>
提示：可以先修(xiū)改(gǎi)部(bù)分代(dài)碼後再運行(háng)
文(wén)章(zhāng)出處(chǔ)：標(biāo)準(zhǔn)之路(lù) 編(biān)輯：楊雨(yǔ)晨思
轉載(zǎi)請(qǐng)保留原文地(dì)址(zhǐ): https://antelcom.cn/show-335.html