|
在網(wǎng)頁制作中,，表單中的對象總是給人一種單調(diào)與沉悶的感覺,，比如說按鈕、文本框等,，它們一成不變的模樣與顏色出現(xiàn)在您的主頁上時,，或多或少都會破壞主頁的美觀程度,，那么可不可以改變它們的模樣呢？我的回答是,，這當(dāng)然可以啊,，下面我們就一起來動手來改變吧。 先看看在網(wǎng)頁中經(jīng)常出現(xiàn)的按鈕與文本框的本來面目吧,！如下圖：  對照上圖,，我們怎么樣才能改變文本框與按鈕的模樣呢？那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考,，第一種是文本框與按鈕無立體感,，只是有線條顏色與填充顏色的，這種效果大家可能在很多網(wǎng)站上都看見過,，給人一種特別的感覺,，很不錯的，第二種效果就比較特殊了，是將文本框做成一種類似于下劃線的效果并且是彩色的,，同時按鈕的背景色也不再是灰色,，而是彩色的，可以說這是一種非?？岬男Ч?，好了，下面我就來說說這兩種效果實現(xiàn)的詳細(xì)操作步驟吧,。 第一種效果：無立體效果的文本框與按鈕 那我們就通過在DW3中網(wǎng)頁的編輯操作為例來進(jìn)行說明,，首先我們已經(jīng)在網(wǎng)頁中插入了相應(yīng)的表單對象，比如插入一個文本框與一個按鈕,，此時,，我們在按下[F10]鍵,，顯示出網(wǎng)頁源代碼編輯窗口,，那我們在網(wǎng)頁的〈head〉與〈/head〉標(biāo)簽之間插入這個樣式表： 〈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語句中加上這一句代碼： class=smallInput 比如在〈input type="text" type="submit" value="平面按鈕"  怎么樣,，比起前面那張圖中的標(biāo)準(zhǔn)按鈕來說是不是美觀多了,，要實現(xiàn)起來其實也不是太難吧。 第二種效果：帶顏色的下劃線式文本框與按鈕效果 同樣,，我們也需要樣式表的幫助來實現(xiàn)這個效果,，和第一種效果的操作步驟一樣在網(wǎng)頁的〈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〉 大家從上面的樣式表中可以看出,，這個效果的實現(xiàn)是通過兩個樣式來實現(xiàn)的,，一個是文本框的，一個是按鈕的,，所以在文本框與按鈕的htm語句中就需要插入兩句不同的代碼,，在文本框中插入的是class=smallInput代碼 如例子 〈input type="text" 代碼如例子〈input type="submit" value="彩色按鈕" 〉其實這就對應(yīng)了樣式表中文本框與按鈕的樣式，最后的效果如下圖所示：
|
|||||
|
|
