寫html超連結的時候,超連結總是自備下劃線,如果不需要下劃線,我們需要將其去掉,下面我們就來說一下怎麼去掉下劃線。
我們在使用超連結的時候,底線總是伴隨著出現,從視覺上來說有著下劃線的a
標籤總是感覺很奇怪,而且在某些需求中,也不需要底線的出現,所以就會問了,有沒有什麼方法讓底線不出現呢?答案是:有的。
我們先來看看有底線的a
標籤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何去掉html a标签下划线</title> </head> <body> <div> <a href="">这是没有去掉下划线的a标签</a> </div> </body> </html>
這是沒有去掉底線的,是大家最熟悉的a
標籤。接下來讓我們來看看去掉下劃線的a
標籤。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何去掉html a标签下划线</title> <style> a{ text-decoration:none; } </style> </head> <body> <div> <a href="">这是去掉下划线的a标签</a> </div> </body> </html>
從圖上可以看出,加上一行text-decoration:none;
程式碼之後,超連結就沒有底線了。
因為text-decoration
規定為文字加上上劃線,底線或刪除線,當屬性值為none
時,表示文字沒有裝飾,所以加上這行程式碼之後,a標籤就沒有文字裝飾了。
是不是特別的簡單,如果想給指定超連結去掉下劃線,只需要在a標籤裡使用行內樣式就可以了。
推薦學習:CSS3影片教學
#以上是如何使用css去掉a標籤的底線? (代碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!