css優化文字方塊與按鈕程式碼

CSS表單美化之文字方塊與按鈕一例

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

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

二、無立體效果的文字方塊與按鈕

　　那我們就透過在DW3中網頁的編輯操作為例來進行說明，首先我們已經在網頁中插入了對應的表單對象，例如插入文字方塊與一個按鈕，此時，我們在按下 [F10]鍵，顯示出網頁原始碼編輯窗口，那我們在網頁的與標籤之間插入這個樣式表：

 

input .smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT:#18px; FONT-WEIGHT: normal; HEIGHT:#18pxx; ;

　　好了第一步就完成了，下一步我們就分別在文字方塊與按鈕的htm語句中加上這一句程式碼：
　　class=smallInput
#　　例如在與
　　
　　這個文字方塊與按鈕的htm語句中加入了這句程式碼。最後的效果如下圖：

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


三、帶顏色的下劃線式文字方塊與按鈕效果
#　　同樣，我們也需要樣式表的幫助來實現這個效果，和第一種效果的操作步驟一樣在網頁的與標籤之間插入樣式表：

##.jb51. net]

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; color: #000000; FONT-SIZE:906; : normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}

input.buttonface{BACKGROUND: #ffcc00; border： -STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}

　。中可以看出，這個效果的實現是透過兩個樣式來實現的，一個是文字方塊 的，一個是按鈕的，所以在文字方塊與按鈕的htm語句中就需要插入兩句不同的程式碼，在文字框中插入的是class=smallInput程式碼。

　　如範例 ，
　　在按鈕語句中插入的是 class="buttonface type="; submit" name="Submit" value="彩色按鈕" class="buttonface">
　　其實這就對應了樣式表中文字方塊與按鈕的樣式，最後的效果如下圖所示：

　　看看上面的效果，還會不會讓您想起那單調的文字方塊與按鈕呢？以上兩種效果的方法都是透過樣式表來實現的，使用方法也十分的簡單。

　　表單的製作是網頁開發中的重點，透過表單可以實現互動與交流，也可以實現資訊的收集與分享，上面的兩篇文章從語義與結構的角度出來進行了探討，您也可以參與討論與學習！

以上是css優化文字方塊與按鈕程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！