CSS讓網頁裡的提交按鈕變得更漂亮

2022-09-25 20:33:10 字數 1953 閱讀 6326

你是不是覺得自己的主頁不夠靚麗,想讓它有所改變呢?聽說過樣式**嗎?就是css,它就是那個能讓你更為準確地控制網頁的東東。讓我們先來看兩個例子:

1、把按鈕的背景由灰色變成黃色,下面是**:

〈formmethod="post"〉

〈inputtype="button"value="按鈕"name="b1"style="background-color:rgb(255,255,0)"〉

〈/p〉

〈/form〉

「form」標籤就是表單的標籤,「type」就是說明按鈕的型別,這裡說明按鈕是普通的命令按鈕。然後,請注意,重要的東西來了! 「style」說明這裡採用了乙個樣式表單,而「background-color」是用來宣告按鈕的背景顏色屬性的,後面的「rgb」則給了它的屬性值,在這裡「(255,255,0)」表示是黃色。

2、把按鈕文字的顏色變成紅色,字型變成楷體,**如下:

〈formmethod="post"〉

〈inputtype="button"value="按鈕"name="b1"style="background-color:rgb(255,255,0);font-family:楷體_gb2312;color:rgb(255,0,0)"〉〈/p〉

〈/form〉

看一下是不是多了些什麼東西?對了,多了兩個屬性:「font-family」和「color」,前乙個是字型屬性,後乙個是字型的顏色屬性,它們的值分別是:楷體_gb2312和rgb(255,0,0),說明文字是紅色的楷體字,好了,通過這個例子來了解一下什麼叫做樣式表單。

首先,什麼叫樣式表單呢?如果你使用過word就知道只需要設定一次版面配置和列印格式,那麼在該檔案內所有的頁面都具有了相同的格式,而樣式表單起的也就是這個作用,在同乙個**只需要提供乙份樣式表單,然後在所有頁引用它,那麼整個**都會有相同的格式。樣式表單一共有三種。

第一種是外部網頁樣式表單。它是乙個以css為字尾lqhqhkwd名的檔案,相當於乙個模板,設定好以後只需要在網頁內部引用它,就能夠使引用的網頁具有相同的格式。

第二種是內嵌式的網頁樣式表單,它一般在申明,它只對本網頁起作用,同時如果你已經使用了外部樣式表單,那麼它將被內嵌式的網頁樣式表單遮蔽。

第三種叫做內聯式樣式表單,用於一段文字,乙個**,或者是一幅圖形。在前面,我們用的就是這種樣式表單,請注意,它通常是接在乙個我們比較熟悉的html標籤之後,比如前文的「input」標籤,以「style」開頭,後面跟著一些屬性和屬性值。並且借助它們來準確地控制這個標籤。屬性與屬性值之間以冒號隔開,屬性與屬性之間用分號隔開。

好了,有了以上的理論知識,我們再來聯絡一下實際,下面我們再看乙個比較複雜的例子:

〈formmethod="post"〉

〈inputtype="button"value="按鈕"name="b1"style="font-family:隸書;font-size:9pt;background-image:url(』file:///d:/inetpub/wwwroot/asp/wwwboad/images/asp400.jwww.cppcns.compg』);border-left:mediumridgergb(128,0,0);border-right:mediumnonergb(128,0,128);border-top:mediumnonergb(0,255,0);border-bottom:mediumridgergb(255,0,0)"〉字串9

〈/p〉

〈/form〉

其實,形式和前面講的是一樣的,只不過多了幾種屬性而已,「font-family: 隸書lqhqhkwd;font-size: 9pt;」用來說明按鈕文字是9pt大小的隸書,按鈕的背景是一幅圖畫,用了乙個「background-image」屬性。接下去用了乙個「border-left」屬性說明按鈕的左邊框是隆起的,邊框線是深紅色的,厚度為中等。其餘的就可以以此類推程式設計客棧了,分別是用來說明按鈕的右邊、上邊和底邊的。

本文標題: css讓網頁裡的提交按鈕變得更漂亮

本文位址: /web/css/26222.html

CSS讓網頁裡的提交按鈕變得更漂亮

你是不是覺得自己的主頁不夠靚麗,想讓它有所改變呢?聽說過樣式 嗎?就是css,它就是那個能讓你更為準確地控制網頁的東東。讓我們先來看兩個例子 1 把按鈕的背景由灰色變成黃色,下面是 form method post input type button value 按鈕 name b1 style b...

網頁Css特效知識之有魔力的按鈕

mission play touch 網頁滑鼠放置到按鈕會有四道白線從四個方向匯成按鈕的邊框,同時按鈕中小箭頭向右移動少許,當滑鼠放置到按鈕上方圖案上時,旋轉360度。網頁滑鼠放置到按鈕會有四道白線從四個方向匯成按鈕的邊框,同時按鈕中小箭頭向右移動少許,當滑鼠放置到按鈕上方圖案上時,旋轉360度。下...

標籤語義化,讓你的網頁更容易懂

一 什麼事標籤語義化?你設計的頁面還是一對的div堆積的嗎?如果你還在沉浸在div包圍的設計風格中,那麼你就是不合格的前端工程師。標籤語義化,讓你的頁面在機器的世界裡不再陌生。html的標籤都是有各自特定的意義的,同時也是為了更好的開發和更加規範。二 標籤語義化的作用?1 讓你的手機更加完美的展示你...