如何去除HTML超鏈接的下劃線

發(fā)布時(shí)間：2020-09-26 10:10:29 來(lái)源：億速云閱讀：233 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何去除HTML超鏈接的下劃線的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧。

在頁(yè)面布局時(shí)，經(jīng)常會(huì)用到a標(biāo)簽，大家都知道a標(biāo)簽?zāi)J(rèn)有下劃線，而且顏色也有所不同，有時(shí)為了頁(yè)面的美觀，需要去除部分超鏈接的下劃線，或者改變超鏈接的顏色，你知道怎么實(shí)現(xiàn)這個(gè)效果嗎？這篇文章就和大家講講如何去除HTML超鏈接的下劃線。對(duì)此不了解的小伙伴，可以參考一下，希望對(duì)你有用。

先舉個(gè)例子：這個(gè)超鏈接未被點(diǎn)擊時(shí)超鏈接文字無(wú)下劃線，顯示為藍(lán)色；當(dāng)鼠標(biāo)經(jīng)過鏈接時(shí)有下劃線，鏈接文字顯示為紅色；當(dāng)點(diǎn)擊鏈接后，鏈接無(wú)下劃線，顯示為綠色。實(shí)現(xiàn)方法很簡(jiǎn)單，在<head>和</head>之間加上如下的CSS代碼：

<style type="text/css">
	a:link { text-decoration: none;color: blue} 
	a:active { text-decoration:blink} 
	a:hover { text-decoration:underline;color: red} 
	a:visited { text-decoration: none;color: green} 
</style>

其中：

　　a:link 指正常的未被訪問過的鏈接；

　　a:active 指正在點(diǎn)的鏈接；

　　a:hover 指鼠標(biāo)在鏈接上；

　　a:visited 指已經(jīng)訪問過的鏈接；

　　text-decoration是文字修飾效果的意思；

　　none參數(shù)表示超鏈接文字不顯示下劃線；

　　underline參數(shù)表示超鏈接的文字有下劃線

鼠標(biāo)經(jīng)過的效果圖：

怎么去除超鏈接的下劃線

我們只需要使用a{text-decoration:none;} 就可以設(shè)置超鏈接標(biāo)簽?zāi)J(rèn)狀態(tài)下去除下劃線。代碼如下：

<style type="text/css">
	a{text-decoration: none;color: red;}
</style>
<body>
	生活不止眼前的茍且，<a href="#">還有詩(shī)和遠(yuǎn)方的田野</a>
</body>

未去除下劃線的效果：

如何去除HTML超鏈接的下劃線

去除下劃線，并將顏色設(shè)置為紅色的效果：

如何去除HTML超鏈接的下劃線

總結(jié)：去除HTML超鏈接的下劃線非常簡(jiǎn)單，只需要給它加上屬性text-decoration:none即可。至于其他text-decoration的屬性，這里不做太多的介紹，有需要的小伙伴，可以去網(wǎng)站上看它的使用方法。

感謝各位的閱讀！關(guān)于如何去除HTML超鏈接的下劃線就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

如何去除HTML超鏈接的下劃線

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽