css文本框與按鈕美化效果代碼

2020-10-23 18:32:32

字體：大中小

來源：轉載

供稿：網友

一、先看看在網頁中經常出現的按鈕與文本框的本來面目吧！

　　對照上圖，我們怎么樣才能改變文本框與按鈕的模樣呢？那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考，第一種是文本框與按鈕無立體感，只是有線條顏色與填充顏色的，這種效果大家可能在很多網站上都看見過，給人一種特別的感覺，很不錯的，第二種效果就比較特殊了，是將文本框做成一種類似于下劃線的效果并且是彩色的，同時按鈕的背景色也不再是灰色，而是彩色的，可以說這是一種非常酷的效果，好了，下面我就來說說這兩種效果實現的詳細操作步驟吧。

二、無立體效果的文本框與按鈕

　　那我們就通過在DW3中網頁的編輯操作為例來進行說明，首先我們已經在網頁中插入了相應的表單對象，比如插入一個文本框與一個按鈕，此時，我們在按下 [F10]鍵，顯示出網頁源代碼編輯窗口，那我們在網頁的<head>與</head>標簽之間插入這個樣式表：

　　好了第一步就完成了，下一步我們就分別在文本框與按鈕的htm語句中加上這一句代碼：
　　class=smallInput
　　比如在<input type="text" name="textfield" class=smallInput>與
　　<input type="submit" name="Submit" value="平面按鈕" class=smallInput>
　　這個文本框與按鈕的htm語句中加入了這句代碼。最后的效果如下圖：

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

三、帶顏色的下劃線式文本框與按鈕效果

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

.VeVB.COm]

　　大家從上面的樣式表中可以看出，這個效果的實現是通過兩個樣式來實現的，一個是文本框的，一個是按鈕的，所以在文本框與按鈕的htm語句中就需要插入兩句不同的代碼，在文本框中插入的是class=smallInput代碼。
　　如例子 <input type="text" name="textfield" class=smallInput>，
　　在按鈕語句中插入的是 class="buttonface"代碼如例子
　　<input type="submit" name="Submit" value="彩色按鈕" class="buttonface">
　　其實這就對應了樣式表中文本框與按鈕的樣式，最后的效果如下圖所示：