網頁兩種以上的文字鏈接效果

  很多人也許學會了怎樣使鏈接文字隨鼠標狀態的改變而改變的做法，這是“css”做出的效果。但也許你只懂得設置一種狀態，比如鼠標放在文字上方，文字變為紅色。如果整個頁面都是如此的“統一”，是不是很枯燥呢？有沒辦法在一個頁面中有多種文字鏈接的效果呢？比如頁面中有兩個文字鏈接，我們想其中一個當鼠標放上去的時候是紅色，另一個則是藍色的。

答案是肯定的，如果手寫代碼，也只是幾行而已，但考慮到現在大多數人都在使用Dreamweaver，下面我們以Dreamweaver MX為工具，談談如何做這種效果。

  1.在DreamweaverMX中，打開你要做多種鏈接效果的頁面。

  2.打開“css styles（CSS 樣式）”面板，新建一個CSS樣式，設置如下圖：

需要注意的是，你選擇“Use css selector（使用CSS選擇器）”再選擇“a:hover（鏈接翻轉）”，并沒有出現上圖的效果，其實技巧就是在這里！我們手動把“a:hove”改成“a.one:hove”，也就是在“a”的后面加上一個“.”與名字（可是任意英文或數字）。設置好后點“OK（確定）”。

  3.在彈出的“style definition for a.one:hover（a.one:hover的CSS樣式定義）”對話框中設置你要的效果，這里我們選擇文字的顏色為紅色。設置完后點“OK（確定）”。

  4.重復第2、3步，第2步需要修改的地方是把“a.one:hover”改為“a.two:hover”（這回“.”后的名字不要與“one”相同）。第3步需要改的就是字體的顏色了，我們設置為藍色。

  5.現在預覽還沒有效果，我們還需看看設置完后的“css styles（CSS 樣式）”控制面板，里面會出現一個“one”和一個“two”。

  6.在頁面中選中其中你想要當鼠標放上去的時候是紅色的鏈接文字，再在“css styles（CSS 樣式）”控制面板中用鼠標選中“one”，然后在文檔窗口中選中當鼠標放上去的時候是藍色的鏈接文字，再在“css styles（CSS 樣式）”控制面板中用鼠標選中“two”。

  7.現在你的頁面已經有兩種效果了。

注意：如果你瀏覽時只有一個文字成功或都沒有成功，請在代碼視圖下把兩個文字前的“ class="one"”和“ class="two"”分別剪切到文字前的“<a”后即可。

總結：按照以上邏輯，我們可以做出無限個文字鏈接效果，關鍵是在于“a:hover”、“a:active”、“a:link”、“a:visited”的修改而已，前面介紹的只是“a:hover”，其他三個一樣可以。只要參照第2步的設置就可以輕松的搞定。