DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 鼠標移上鏈接出現下劃線
鼠標移上鏈接出現下劃線
編輯:Dreamweaver相關     

  有些網頁的鏈接,原先沒有下劃線,你把鼠標指向鏈接處,才會出現下劃線,鼠標移掉下劃線就又沒有了。這種效果其實可以用層疊樣式表(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按鈕,至此所有設置結束。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved