首頁 > web前端 > html教學 > html超連結的底線怎麼去掉? a標籤去底線的方法都在這裡

html超連結的底線怎麼去掉? a標籤去底線的方法都在這裡

寻∝梦
發布: 2018-09-03 17:25:56
原創
80792 人瀏覽過

這篇文章就是關於html超連結取消底線的用法,教你如何快速的去掉HTML超連結下劃線的方法,最後還有相關程式碼解釋,下面就讓我們一起看看這篇文章吧

首先我們使用css的基礎樣式來做一個最簡單的去下劃線的方法:

html a超連結標籤,預設有的瀏覽器顯示有底線,有的沒有底線,大多錨文本超連結A標籤內字體是有下劃線的,怎麼去除超連結下劃線? html 超連結去除底線怎麼做?

去掉移除超連結錨文本的底線需要CSS樣式屬性:

text-decoration

大多時候我們知道:text-decoration:underline是顯示下劃線。

html中去除去掉a標籤超連結下劃線程式碼:

text-decoration:none
a{text-decoration:none}
登入後複製

這樣既可去除網頁中超連結下劃線效果。如果只設定此CSS代碼 ,滑鼠懸停超連結上時也會取消去掉下劃線,下劃線也不會顯示。

避免相容問題,如果想滑鼠懸停點擊時超連結也不切實際下劃線,還需CSS程式碼如下:

a:hover{text-decoration:none}
登入後複製

滑鼠移到超連結上方不顯示底線。

完整HTML去掉超連結底線-html超連結下劃線去除程式碼:

a{ text-decoration:none} 
a:hover{ text-decoration:none}
登入後複製

看個完整的程式碼實例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8" /> 
<title>PHP中文网:取消下划线实例</title> 
<style> 
a{text-decoration:none} 
a:hover{text-decoration:none} 
</style> 
</head> 
<body> 
欢迎来到<a href=“m.sbmmt.com”>php中文网</a>
</body> 
</html>
登入後複製

讓我們一起看看這個在瀏覽器中的效果圖:

html超連結的底線怎麼去掉? a標籤去底線的方法都在這裡

以上的圖是不是很清楚,本來在PHP中文網那裡有個下劃線的,現在也沒有了,這樣是不是方便很多了。

還有以下關於底線的程式碼,你可能會用得著:

1.html超連結預設顯示底線,滑鼠懸停下劃線消失

a{ text-decoration:underline} 
a:hover{ text-decoration:none}
登入後複製

2.html預設去掉下劃線,滑鼠懸停顯示下劃線

a{ text-decoration:none} 
a:hover{ text-decoration:underline}
登入後複製

以上就是本篇關於html超連結的取消底線的方法了,還有些相關的程式碼,猜你可能用得著,有問題的歡迎在下方提問。

【小編推薦】

html空格程式碼怎麼寫? html空格程式碼的表現方式總結

html tbody標籤是區塊級元素嗎? html tbody標籤的基礎用法

#

以上是html超連結的底線怎麼去掉? a標籤去底線的方法都在這裡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板