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

　　是不是在做網頁時，為按鈕的製作發過愁啊？用圖片做按鈕的話，影響速度，不用圖片，網頁裡自帶的按鈕真的是不感恭維，真是最近比較煩，其實，有了CSS（Cascading Style Sheet的縮寫，層疊樣式單）之後，就些問題就可迎韌而解啦。

$#@60;!―例1.黃色背景按鈕--$#@62;

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

$#@60;p$#@62;

$#@60;input type="button" value="按鈕" name="a1" style="background-color: rgb(255,255,0)"$#@62;

$#@60;/p$#@62;

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

　　略懂HTML原始碼和CSS的朋友不難看出，以上程式碼是把HTML裡的普通按鈕採用了一個樣式表單(Style)，用background-color來申明按鈕的背景顏色屬性的，後面的Rgb(255,255,0)則給了它的屬性值，就成了我們所看到的黃色按鈕啦。

$#@60;!―例2.黃色背景，9pt紅色楷體字按鈕--$#@62;

$#@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"$#@62;

$#@60;/p$#@62;

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

　　上例是在例1的基礎上加深了一步，增加了三個屬性，一個是color，他的值是rgb(255,0,0)，是代表了字型的顏色是紅色。還有一個是font-family，這表明了字型的屬性是楷體字，他的值是楷體_GB2312。最後一個font-size是指字型大小的屬性是9pt。

　　透過上面兩個例子，大家已經基本上掌握了利用css讓你網頁上的按鈕更美觀。下面，我將教大家結合實際，製作更復雜，更美觀的按鈕。

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

相關文章