讓首頁的按鈕靚起來

按鈕

你做的首頁是不是和別人的一樣 ，顯得千篇一律，沒有性格，是否想讓網頁換個樣子呢？聽說過樣式表格嗎？就是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屬性說明按鈕的左邊框是隆起的，邊框線是深紅色的，厚度為中等。其餘的就可以以此類推了！