為主頁新增一個漂亮的按鈕（下）(轉)[@more@]

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

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

　　第二種是內嵌式的網頁樣式表單，它一般在$#@60; HEAD$#@62;...$#@60; /HEAD$#@62;申明，它只對本網頁起作用，同時如果你已經使用了外部樣式表單，那麼它將被內嵌式的網頁樣式表單遮蔽。

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

　　好了，有了以上的理論知識，讓我們來聯絡一下實際吧。

$#@60;form method="POST"$#@62;

$#@60;p$#@62;$#@60;input type="button" value="按鈕" name="a1"

style="background-color: rgb(255,255,0); color: rgb(255,0,0); font-family: 楷體_GB2312; font-size: 9pt; background-image: url("corner_01.gif"); border-left: 1px solid rgb(128,0,0); border-right: 1px none rgb(128,0,128); border-top: 1px double rgb(0,255,0); border-bottom: 1px ridge rgb(255,0,0)"$#@62;$#@60;/p$#@62;

$#@60;/form$#@62;

　　這一例項只是在上面兩例的基礎上又多加了幾種屬性而已，即按鈕的背景是一幅圖畫，用了一個Background－image屬性。和用了一個Border－left屬性說明按鈕的左邊框是固體的，邊框線是深紅色的，厚度為1pt，其餘的就可以以此類推了！

　　至此，大家已經全部掌握了按鈕的製作方法，關鍵還在於大家在色彩上的搭配，祝大家能做出最漂亮的按鈕。

為主頁新增一個漂亮的按鈕（下）(轉)

相關文章