寫(xiě)html超鏈接的時(shí)候,超鏈接總是自帶下劃線(xiàn),如果不需要下劃線(xiàn),我們需要將其去掉,下面我們就來(lái)說(shuō)一下怎么去掉下劃線(xiàn)。

我們?cè)谑褂贸溄拥臅r(shí)候,下劃線(xiàn)總是伴隨著出現(xiàn),從視覺(jué)上來(lái)說(shuō)有著下劃線(xiàn)的a標(biāo)簽總是感覺(jué)很奇怪,而且在某些需求中,也不需要下劃線(xiàn)的出現(xiàn),所以就會(huì)問(wèn)了,有沒(méi)有什么方法讓下劃線(xiàn)不出現(xiàn)呢?答案是:有的。
我們首先來(lái)看一下有下劃線(xiàn)的a標(biāo)簽。
<!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標(biāo)簽下劃線(xiàn)</title> </head> <body> <div> <a href="">這是沒(méi)有去掉下劃線(xiàn)的a標(biāo)簽</a> </div> </body> </html>

這是沒(méi)有去掉下劃線(xiàn)的,是大家最熟悉的a標(biāo)簽。接下來(lái)讓我們看看去掉下劃線(xiàn)的a標(biāo)簽。
<!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標(biāo)簽下劃線(xiàn)</title> <style> a{ text-decoration:none; } </style> </head> <body> <div> <a href="">這是去掉下劃線(xiàn)的a標(biāo)簽</a> </div> </body> </html>

從圖上可以看出,加上一行text-decoration:none;代碼之后,超鏈接就沒(méi)有下劃線(xiàn)了。
因?yàn)?code>text-decoration規(guī)定給文本添加上劃線(xiàn),下劃線(xiàn)或者刪除線(xiàn),當(dāng)屬性值為none時(shí),表示文本沒(méi)有裝飾,所以加上這行代碼之后,a標(biāo)簽就沒(méi)有文本裝飾了。
是不是特別的簡(jiǎn)單,如果想給指定超鏈接去掉下劃線(xiàn),只需要在a標(biāo)簽里使用行內(nèi)樣式就可以了。
推薦學(xué)習(xí):CSS3視頻教程
站長(zhǎng)資訊網(wǎng)