html如何去除超連結下劃線？ html超連結去掉下劃線的方法介紹-html教學-PHP中文網

html如何去除超連結下劃線？ html超連結去掉下劃線的方法介紹

不言

發布： 2018-10-09 11:25:02

原創

25570 人瀏覽過

前端網頁的開發中總是不可避免會使用到超鏈接，但是使用超鏈接時下面都會有一條下劃線，這在網頁中有時會顯得很突兀，不合適也不美觀，所以我們就需要將超連結下的這條底線給去掉，接下來的這篇文章就來給大家介紹html下超連結去掉下劃線的方法。有需要的朋友可以參考一下，話不多說，我們直接來看正文。

在html程式碼中去掉超連結的底線需要的是css中的text-decoration這個屬性。

對於text-decoration屬性，我們需要定義的參數是 text-decoration:none;就可以去掉超連結的下劃線。（關於text-decoration屬性中其他參數大家可以參考css學習手冊）.

#下面我們就直接來看html中a超連結去掉下劃線的程式碼。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css">
      a{text-decoration:none}
    </style> 
    </head> 
    <body>欢迎来到<a href="http://www.php.cn/">php中文网</a>！
    </body> 
    </html>

登入後複製

html中a超連結去掉下劃線的效果如下：

html如何去除超連結下劃線？ html超連結去掉下劃線的方法介紹

上面的程式碼所實現的是將html中a超連結底線直接去掉，可是我們有時候需要讓超連結去掉下劃線，但滑鼠停留在上面時有下劃線，這該如何實現呢？下面我們就來直接看一下程式碼。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css">
a:link,a:visited{
 text-decoration:none;  /*超链接无下划线*/
}
a:hover{
 text-decoration:underline;  /*鼠标放上去有下划线*/
}
</style>
</head> 
<body>欢迎来到<a href="http://www.php.cn/">php中文网</a>！
</body> 
</html>

登入後複製

說明：上述程式碼中讓超連結去掉下劃線，但滑鼠停留在上面時有底線用到了:hover，在樣式表裡屬於偽類，表示滑鼠懸停時候的狀態。

以上就是本篇文章的全部內容了，更多精彩大家可以追蹤php中文網！！！

以上是html如何去除超連結下劃線？ html超連結去掉下劃線的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！