久久久久亚洲精品不卡日韩,午夜福利网站免费

主頁 > 知識(shí)庫 > css文本框與按鈕美化效果代碼

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

一、先看看在網(wǎng)頁中經(jīng)常出現(xiàn)的按鈕與文本框的本來面目吧！

　　對(duì)照上圖，我們?cè)趺礃硬拍芨淖兾谋究蚺c按鈕的模樣呢？那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考，第一種是文本框與按鈕無立體感，只是有線條顏色與填充顏色的，這種效果大家可能在很多網(wǎng)站上都看見過，給人一種特別的感覺，很不錯(cuò)的，第二種效果就比較特殊了，是將文本框做成一種類似于下劃線的效果并且是彩色的，同時(shí)按鈕的背景色也不再是灰色，而是彩色的，可以說這是一種非?？岬男Ч?，好了，下面我就來說說這兩種效果實(shí)現(xiàn)的詳細(xì)操作步驟吧。

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

　　那我們就通過在DW3中網(wǎng)頁的編輯操作為例來進(jìn)行說明，首先我們已經(jīng)在網(wǎng)頁中插入了相應(yīng)的表單對(duì)象，比如插入一個(gè)文本框與一個(gè)按鈕，此時(shí)，我們?cè)诎聪?nbsp;[F10]鍵，顯示出網(wǎng)頁源代碼編輯窗口，那我們?cè)诰W(wǎng)頁的head>與/head>標(biāo)簽之間插入這個(gè)樣式表：

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>
　　這個(gè)文本框與按鈕的htm語句中加入了這句代碼。最后的效果如下圖：

　　怎么樣，比起前面那張圖中的標(biāo)準(zhǔn)按鈕來說是不是美觀多了，要實(shí)現(xiàn)起來其實(shí)也不是太難吧。

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

　　同樣，我們也需要樣式表的幫助來實(shí)現(xiàn)這個(gè)效果，和第一種效果的操作步驟一樣在網(wǎng)頁的head>與/head>標(biāo)簽之間插入樣式表：

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

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

　　看看上面的效果，還會(huì)不會(huì)讓您想起那單調(diào)的文本框與按鈕呢？以上兩種效果的方法都是通過樣式表來實(shí)現(xiàn)的，使用方法也十分的簡(jiǎn)單。

　　表單的制作是網(wǎng)頁開發(fā)中的重點(diǎn)，通過表單可以實(shí)現(xiàn)交互與交流，也可以實(shí)現(xiàn)信息的收集與共享，上面的兩篇文章從語義與結(jié)構(gòu)的角度出來進(jìn)行了探討，您也可以參與討論與學(xué)習(xí)！

您可能感興趣的文章:

使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法
CSS小例子(只顯示下劃線的文本框，像文字一樣的按鈕)
CSS 美化段落文本之首字下沉
文本框css關(guān)閉輸入法
CSS漸變文本效果的兩種方法比較
用css實(shí)現(xiàn)隱藏文本框
CSS控制文本自動(dòng)換行的問題
用CSS動(dòng)態(tài)控制文本屬性
詳解CSS不定寬溢出文本適配滾動(dòng)

標(biāo)簽：邵陽貴州萊蕪滄州賀州混顯鶴壁廣安

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《css文本框與按鈕美化效果代碼》，本文關(guān)鍵詞 css,文本,框,與,按鈕,美化,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。