CSS讓網(wǎng)頁(yè)提交input按鈕與眾不同

你是不是覺(jué)得自己的主頁(yè)不夠靚麗,想讓它有所改變呢?聽(tīng)說(shuō)過(guò)樣式表格嗎?就是CSS,它就是那個(gè)能讓你更為準(zhǔn)確地控制網(wǎng)頁(yè)的東東。 你是不是覺(jué)得自己的主頁(yè)不夠靚麗,想讓它有所改變呢?聽(tīng)說(shuō)過(guò)樣式表格嗎?就是CSS,它就是那個(gè)能讓你更為準(zhǔn)確地控制網(wǎng)頁(yè)的東東。讓我們先來(lái)看兩個(gè)例子:
1、把按鈕的背景由灰色變成黃.色,下面是代碼:
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1" style="background-color: rgb(255,255,0)"〉
〈/p〉
〈/form〉
“form”標(biāo)簽就是表單的標(biāo)簽,“type”就是說(shuō)明按鈕的類型,這里說(shuō)明按鈕是普通的命令按鈕。然后,請(qǐng)注意,重要的東西來(lái)了! “style”說(shuō)明這里采用了一個(gè)樣式表單,而“background-color”是用來(lái)聲明按鈕的背景顏色屬性的,后面的“rgb”則給了它的屬性值,在這里“(255,255,0)”表示是黃.色。
2、把按鈕文字的顏色變成紅色,字體變成楷體,代碼如下:
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1" style="background-color:rgb(255,255,0); font-family:楷體_GB2312; color: rgb(255,0,0)"〉〈/p〉
〈/form〉
看一下是不是多了些什么東西?對(duì)了,多了兩個(gè)屬性:“font-family”和“color”,前一個(gè)是字體屬性,后一個(gè)是字體的顏色屬性,它們的值分別是:楷體_GB2312和rgb(255,0,0),說(shuō)明文字是紅色的楷體字,好了,通過(guò)這個(gè)例子來(lái)了解一下什么叫做樣式表單。
首先,什么叫樣式表單呢?如果你使用過(guò)Word就知道只需要設(shè)置一次版面配置和打印格式,那么在該文件內(nèi)所有的頁(yè)面都具有了相同的格式,而樣式表單起的也就是這個(gè)作用,在同一個(gè)網(wǎng)站只需要提供一份樣式表單,然后在所有頁(yè)引用它,那么整個(gè)網(wǎng)站都會(huì)有相同的格式。樣式表單一共有三種。
第一種是外部網(wǎng)頁(yè)樣式表單。它是一個(gè)以CSS為后綴名的文件,相當(dāng)于一個(gè)模板,設(shè)置好以后只需要在網(wǎng)頁(yè)內(nèi)部引用它,就能夠使引用的網(wǎng)頁(yè)具有相同的格式。
第二種是內(nèi)嵌式的網(wǎng)頁(yè)樣式表單,它一般在申明,它只對(duì)本網(wǎng)頁(yè)起作用,同時(shí)如果你已經(jīng)使用了外部樣式表單,那么它將被內(nèi)嵌式的網(wǎng)頁(yè)樣式表單屏蔽。
第三種叫做內(nèi)聯(lián)式樣式表單,用于一段文字,一個(gè)表格,或者是一幅圖形。在前面,我們用的就是這種樣式表單,請(qǐng)注意,它通常是接在一個(gè)我們比較熟悉的HTML標(biāo)簽之后,比如前文的“input”標(biāo)簽,以“style”開(kāi)頭,后面跟著一些屬性和屬性值。并且借助它們來(lái)準(zhǔn)確地控制這個(gè)標(biāo)簽。屬性與屬性值之間以冒號(hào)隔開(kāi),屬性與屬性之間用分號(hào)隔開(kāi)。
好了,有了以上的理論知識(shí),我們?cè)賮?lái)聯(lián)系一下實(shí)際,下面我們?cè)倏匆粋€(gè)比較復(fù)雜的例子:
〈form method="POST"〉
〈input type="button" value="按鈕" name="B1" style="font-family: 隸書; font-size: 9pt; background-image: url(’/IMAGES/asp400.jpg’); border-left: medium ridge rgb(128,0,0); border-right: medium none rgb(128,0,128); border-top: medium none rgb(0,255,0); border-bottom: medium ridge rgb(255,0,0)"〉
〈/p〉
〈/form〉
其實(shí),形式和我前面講的是一樣的,只不過(guò)多了幾種屬性而已,“font-family: 隸書;Font-size: 9pt;”用來(lái)說(shuō)明按鈕文字是9PT大小的隸書,按鈕的背景是一幅圖畫,用了一個(gè)“background-image”屬性。接下去用了一個(gè)“border-left”屬性說(shuō)明按鈕的左邊框是隆起的,邊框線是深紅色的,厚度為中等。其余的就可以以此類推了,分別是用來(lái)說(shuō)明按鈕的右邊、上邊和底邊的。
相關(guān)文章
CSS3表單input輸入框聚焦動(dòng)畫特效源碼 24種
本特效是一組效果超酷的表單input輸入框聚焦CSS3動(dòng)畫特效效果的代碼。這組特效共24種不同的聚焦動(dòng)畫效果,歡迎下載使用2016-04-26CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫了一個(gè)登錄表單頁(yè)面,再iphone上測(cè)試遇到了一些奇怪的問(wèn)題:表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會(huì)出現(xiàn)圓角的情況;input[type="text"]文本輸2014-10-11CSS樣式控制實(shí)現(xiàn)IE提交表單記錄歷史點(diǎn)擊返回信息仍在
一個(gè)CSS樣式控制和一個(gè)META標(biāo)簽即可實(shí)現(xiàn)IE提交表單記錄歷史,點(diǎn)擊返回信息仍在,需要的朋友可以參考下2014-05-21css3中檢驗(yàn)表單的required,focus,valid和invalid樣式
HTML5的出現(xiàn)為我們提供一些屬性,不用編寫js和正則即可解決這個(gè)檢驗(yàn)表單內(nèi)容required,focus,valid和invalid樣式,感興趣的朋友可以了解下本文2014-02-21css3實(shí)現(xiàn)一款模仿iphone樣式的注冊(cè)表單
注冊(cè)表單而且還是iphone樣式的,怎么樣心動(dòng)了吧,學(xué)好css3實(shí)現(xiàn)這個(gè)效果不是問(wèn)題,接下來(lái)為大家詳細(xì)介紹下css3如何實(shí)現(xiàn)注冊(cè)表單的樣式,感興趣的你們可不要錯(cuò)過(guò)了哈2013-03-20CSS實(shí)現(xiàn)學(xué)生入學(xué)畢業(yè)檔案漂亮表單樣式特效源碼
CSS實(shí)現(xiàn)學(xué)生入學(xué)畢業(yè)檔案漂亮表單樣式特效源碼是一款使用的學(xué)生檔案記錄表單代碼,支持提交內(nèi)容時(shí)自動(dòng)驗(yàn)證手機(jī)號(hào)和郵箱,所屬院校是下拉列表式的可選擇,基礎(chǔ)水平根入學(xué)成2016-06-02