首頁 >web前端 >css教學 >圖文詳解怎麼去除HTML超連結的底線

圖文詳解怎麼去除HTML超連結的底線

yulia
yulia原創
2018-09-19 17:48:599616瀏覽

在頁面佈局時,常常會用到a標籤,大家都知道a標籤預設有下劃線,而且顏色也有所不同,有時為了頁面的美觀,需要去除部分超連結的下劃線,或是改變超連結的顏色,你知道怎麼達到這個效果嗎?這篇文章就跟大家講講如何去除HTML超連結的底線。對此不了解的小夥伴,可以參考一下,希望對你有用。

先舉例:這個超連結未被點擊時超連結文字無底線,顯示為藍色;當滑鼠經過連結時有底線,連結文字顯示為紅色;當點擊連結後,連結無底線,顯示為綠色。實作方法很簡單,在

和之間加上如下的CSS代碼: 
<style type="text/css">
	a:link { text-decoration: none;color: blue} 
	a:active { text-decoration:blink} 
	a:hover { text-decoration:underline;color: red} 
	a:visited { text-decoration: none;color: green} 
</style>

其中: 

  a:link 指正常的未被訪問過的鏈接; 

  a:active 指正在點的鏈接; 

  a:hover 指鼠標在鏈接上; 

  a:visited 指已經訪問過的鏈接; 

  text-decoration是文字修飾效果的意思; 

  none參數表示超連結文字不顯示底線; 

#  underline參數表示超連結文字不顯示底線; 

#  underline參數表示超連結文字不顯示底線; 

#  underline參數表示超連結線的文字有下劃線; 圖文詳解怎麼去除HTML超連結的底線

#  underline參數表示超連結線的文字有下劃線; ##滑鼠經過的效果圖:


怎麼移除超連結的下劃線

我們只需要使用a{ text-decoration:none;} 就可以設定超連結標籤預設狀態下移除底線。程式碼如下:圖文詳解怎麼去除HTML超連結的底線

<style type="text/css">
	a{text-decoration: none;color: red;}
</style>
<body>
	生活不止眼前的苟且,<a href="#">还有诗和远方的田野</a>
</body>

未移除底線的效果:

圖文詳解怎麼去除HTML超連結的底線

#移除底線,並將顏色設為紅色的效果:


#######總結:移除HTML超連結的底線非常簡單,只需要給它加上屬性text-decoration:none即可。至於其他text-decoration的屬性,這裡不做太多的介紹,有需要的小夥伴,可以去網站上看它的使用方法。 ######

以上是圖文詳解怎麼去除HTML超連結的底線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn