首頁 > 開發者 > CSS

css最佳化文字框與按鈕代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
CSS表單美化之文字框與按鈕一例

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


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

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

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


<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" name="textfield" class=smallInput>與
　　<input type="submit" name="Submit" value="平面按鈕" class=smallInput>
　　這個文字框與按鈕的htm語句中加入了這句代碼。最後的效果如：


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

三、帶顏色的底線式文字框與按鈕效果

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


.jb51.net]

<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>


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


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

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More