巧用樣式表,讓文字框與按鈕變個樣

2021-04-12 15:22:43 字數 1102 閱讀 6629

摘自:http://www.dvbbs.net/tech/dw/2006041949056.asp

第一種效果:無立體效果的文字框與按鈕

那我們就通過在dw3中網頁的編輯操作為例來進行說明,首先我們已經在網頁中插入了相應的表單物件,比如插入乙個文字框與乙個按鈕,此時,我們在按下[f10]鍵,顯示出網頁源**編輯視窗,那我們在網頁的〈head〉與〈/head〉標籤之間插入這個樣式表:

〈style type="text/css"〉

input.**allinput

〈/style〉

好了第一步就完成了,下一步我們就分別在文字框與按鈕的htm語句中加上這一句**:

class=**allinput

比如在〈input type="text" name="textfield" class=**allinput〉與〈input type="submit" name="submit" value="平面按鈕" class=**allinput〉這個文字框與按鈕的htm語句中加入了這句**。最後的效果如下圖:

怎麼樣,比起前面那張圖中的標準按鈕來說是不是美觀多了,要實現起來其實也不是太難吧。

第二種效果:帶顏色的下劃線式文字框與按鈕效果

同樣,我們也需要樣式表的幫助來實現這個效果,和第一種效果的操作步驟一樣在網頁的〈head〉與〈/head〉標籤之間插入樣式表,

〈style type="text/css"〉

input.**allinput

input.buttonface

〈/style〉

大家從上面的樣式表中可以看出,這個效果的實現是通過兩個樣式來實現的,乙個是文字框的,乙個是按鈕的,所以在文字框與按鈕的htm語句中就需要插入兩句不同的**,在文字框中插入的是class=**allinput** 如例子 〈input type="text" name="textfield" class=**allinput〉,在按鈕語句中插入的是 class="buttonface"**如例子〈input type="submit" name="submit" value="彩色按鈕" class="buttonface"〉其實這就對應了樣式表中文字框與按鈕的樣式,最後的效果如下圖所示:

巧用樣式表打造個性文字框與按鈕

在網頁製作中,表單中的物件總是給人一種單調與沉悶的感覺,比如說按鈕 文字框等,它們一成不變的模樣與顏色出現在您的主頁上時,或多或少都會破壞主頁的美觀程度,那麼可不可以改變它們的模樣呢?我的回答是,這當然可以啊,下面我們就一起來動手來改變吧。先看看在網頁中經常出現的按鈕與文字框的本來面目吧!對照上圖,...

巧用樣式表打造個性文字框與按鈕

在網頁製作中,表單中的物件總是給人一種單調與沉悶的感覺,比如說按鈕 文字框等,它們一成不變的模樣與顏色出現在您的主頁上時,或多或少都會破壞主頁的美觀程度,那麼可不可以改變它們的模樣呢?我的回答是,這當然可以啊,下面我們就一起來動手來改變吧。先看看在網頁中經常出現的按鈕與文字框的本來面目吧!對照上圖,...

常用按鈕 文字框 表單等CSS樣式

雖然css樣式的學習需要我們動手多實踐,需要多做案例,思致思考,但有時候注意資料的收集與整理也是非常重要的,在實際開發中往往會起到事半功倍的效 果。在52css.com的文件中,也提供了豐富的內容。下面一些關於按鈕 文字框 表單的常用css樣式。大家可以參考。一 按鈕樣式 example sourc...