圖文詳解怎麼去除HTML超連結的底線-css教學-PHP中文網

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

yulia

發布： 2018-09-19 17:48:59

原創

9581 人瀏覽過

在頁面佈局時，常常會用到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參數表示超連結線的文字有下劃線；圖文詳解怎麼去除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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

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