DreamWeaver超級技巧7

  36. 實現用滑鼠指向連結時出現下劃線的效果

有些網頁的連結,原先沒有下劃線,你把滑鼠指向連結處,才會出現下劃線,滑鼠移掉下劃線就又沒有了。這種效果其實可以用層疊樣式表(css)來實現,在dreamweaver中編輯層疊樣式表不用編寫代碼,具體操作方法如下:

(1)在快速啟動欄中點擊層疊樣式表按鈕(就是把滑鼠放上去顯示“show css styles”的那個按鈕),在彈出的css styles面板上雙擊(none);

(2)此時,可看到彈出的edit style sheet 面板,在該面板上按new按鈕;

(3)再在彈出的new style 面板上點取redefine html tag(重新定義html標記)再在tag中選擇“a”(超級連結標記)標記後按ok按鈕;(4)這時可看到彈出的style dehinition for a 的對話框,在此對話框中可以設定超級連結的許多屬性,你可以按你的意願設定,但我們這裡主要是要去掉那討厭的下劃線,所以我們在decoration 屬性中選擇“none”,這樣就把下劃線去掉了;然後我們再選擇顏色為:#339966。按ok按鈕返回到edit style sheet 面板;

(5)在edit style sheet 面板上再按new按鈕;

(6)在彈出的new style 面板上點取use css selector ,再在該面板上的selector選擇框中選擇“a:hover”(定義當滑鼠在超級連結上時連結的屬性),按ok按鈕;

(7)在彈出的style dehinition for a:hover 的對話框中,我們在decoration 屬性中選擇“underline”,這樣就把下劃線又加上了;然後我們再選擇顏色為:#ff3300。按ok按鈕返回到edit style sheet 面板;

(8)在edit style sheet 面板上再按don按鈕,至此所有設定結束。