在網(wǎng)頁(yè)制作中，表單中的對(duì)象總是給人一種單調(diào)與沉悶的感覺，比如說(shuō)按鈕、文本框等，它們一成不變的模樣與顏色出現(xiàn)在您的主頁(yè)上時(shí)，或多或少都會(huì)破壞主頁(yè)的美觀程度，那么可不可以改變它們的模樣呢？我的回答是，這當(dāng)然可以啊，下面我們就一起來(lái)動(dòng)手來(lái)改變吧。
先看看在網(wǎng)頁(yè)中經(jīng)常出現(xiàn)的按鈕與文本框的本來(lái)面目吧！
對(duì)照上圖，我們?cè)趺礃硬拍芨淖兾谋究蚺c按鈕的模樣呢？那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考，第一種是文本框與按鈕無(wú)立體感，
只是有線條顏色與填充顏色的，這種效果大家可能在很多網(wǎng)站上都看見過，給人一種特別的感覺，很不錯(cuò)的，第二種效果就比較特殊了，是將文本框做成一種類似于
下劃線的效果并且是彩色的，同時(shí)按鈕的背景色也不再是灰色，而是彩色的，可以說(shuō)這是一種非常酷的效果，好了，下面我就來(lái)說(shuō)說(shuō)這兩種效果實(shí)現(xiàn)的詳細(xì)操作步驟
吧。
第一種效果：無(wú)立體效果的文本框與按鈕
那我們就通過在DW3中網(wǎng)頁(yè)的編輯
操作為例來(lái)進(jìn)行說(shuō)明，首先我們已經(jīng)在網(wǎng)頁(yè)中插入了相應(yīng)的表單對(duì)象，比如插入一個(gè)文本框與一個(gè)按鈕，此時(shí)，我們?cè)诎聪耓F10]鍵，顯示出網(wǎng)頁(yè)源代碼編輯窗
口，那我們?cè)诰W(wǎng)頁(yè)的<head>與</head>標(biāo)簽之間插入這個(gè)樣式表：
<style type="text/css">
input.smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>
好了第一步就完成了，下一步我們就分別在文本框與按鈕的htm語(yǔ)句中加上這一句代碼：
class=smallInput
比
如在<input type="text" name="textfield" class=smallInput>與<
input type="submit" name="Submit" value="平面按鈕" class=smallInput>這個(gè)文本框
與按鈕的htm語(yǔ)句中加入了這句代碼。最后的效果如下圖：
怎么樣，比起前面那張圖中的標(biāo)準(zhǔn)按鈕來(lái)說(shuō)是不是美觀多了，要實(shí)現(xiàn)起來(lái)其實(shí)也不是太難吧。
第二種效果：帶顏色的下劃線式文本框與按鈕效果
同樣，我們也需要樣式表的幫助來(lái)實(shí)現(xiàn)這個(gè)效果，和第一種效果的操作步驟一樣在網(wǎng)頁(yè)的<head>與</head>標(biāo)簽之間插入樣式表，
<style type="text/css">
input.smallInput{background:#ffffff;border-bottom-color:#ff6633; border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>
大家從上面的樣式表中可以看出，這個(gè)效果的實(shí)現(xiàn)是通過兩個(gè)樣式來(lái)實(shí)現(xiàn)的，一個(gè)是文本框的，一個(gè)是按鈕
的，所以在文本框與按鈕的htm語(yǔ)句中就需要插入兩句不同的代碼，在文本框中插入的是class=smallInput代碼 如例子 <
input type="text" name="textfield" class=smallInput>，在按鈕語(yǔ)句中插入的是 class
="buttonface"代碼如例子<input type="submit" name="Submit" value="彩色按鈕
" class="buttonface">其實(shí)這就對(duì)應(yīng)了樣式表中文本框與按鈕的樣式，最后的效果如下圖所示：
看看上面的效果，還會(huì)不會(huì)讓您想起那單調(diào)的文本框與按鈕呢？以上兩種效果的方法都是通過樣式表來(lái)實(shí)現(xiàn)的，使用方法也十分的簡(jiǎn)單，不要對(duì)我說(shuō)這很難喔，最真心的希望能通過這篇文章介紹的方法能讓你的主頁(yè)多一點(diǎn)精彩。否則就對(duì)不起我這雙為了研究它們而成的黑眼圈了。