讓首頁的按鈕靚起來

來源:互聯網
上載者:User
按鈕

  你做的首頁是不是和別人的一樣 ,顯得千篇一律,沒有性格,是否想讓網頁換個樣子呢?聽說過樣式表格嗎?就是CSS,它就是那個能讓你更為準確地控制網頁的東東。讓我們先來看兩個例子:

  1.把按鈕的背景由灰色變成黃色,下面是代碼:

  〈 form method=″POST″>

  〈 input type=″button″ value=″按鈕″ name=″B1″

  style=″background-color: rgb(255,255,0)″>

〈 /p>

  〈 /form>

  看得懂嗎?Form標籤不用我說吧?就是表單的標籤,接下來的就是說明按鈕的類型,這裡說明按鈕是普通的命令按鈕!然後,請注意,重要的東西來了! Style:說明這裡採用了一個樣式表單,而Background-color是用來聲明按鈕的背景顏色屬性的,後面的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>

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

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

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

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

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

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

  〈 form method=″POST″>

   〈 input type=″button″ value=″按鈕″ name=″B1″

   style=″font-family: 隸書; font-size: 9pt; background-image: url

(’file:///D:/Inetpub/wwwroot/asp/wwwboad/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>

  其實,形式和我前面講的是一樣的,只不過多了幾種屬性而已,首先Font-family: 隸書;Font-size: 9pt;用來說明按鈕文字是9PT大小的隸書,其次按鈕的背景是一幅圖畫,用了一個Background-image屬性。再次,用了一個Border-left屬性說明按鈕的左邊框是隆起的,邊框線是深紅色的,厚度為中等。其餘的就可以以此類推了!



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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