html如何去除超連結下劃線？ html超連結去掉下劃線的方法介紹
- 不言原創
- 2018-10-09 11:25:0225646瀏覽
前端網頁的開發中總是不可避免會使用到超鏈接，但是使用超鏈接時下面都會有一條下劃線，這在網頁中有時會顯得很突兀，不合適也不美觀，所以我們就需要將超連結下的這條底線給去掉，接下來的這篇文章就來給大家介紹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中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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn