技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

CSS實(shí)現(xiàn)在外部鏈接后面添加一個(gè)出站鏈接圖標(biāo)

作者:admin    時(shí)間:2019-5-7 14:46:12    瀏覽:

在網(wǎng)頁(yè)上的外部鏈接旁邊放置一個(gè)出站鏈接圖標(biāo)會(huì)很有用的,這很容易使用CSS實(shí)現(xiàn),而無(wú)需向錨標(biāo)記添加任何其他元素或向HTML源添加其他圖像標(biāo)記。

使用出站鏈接圖標(biāo)的外部鏈接的示例是這樣的:

用HTML和CSS做這樣的事情最明顯的方法是這樣的。

CSS

a.external {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

HTML

<a href="#" class="external">Link</a>

execcodegetcode

但是,這個(gè)解決方案要求您確保始終在您的<a>標(biāo)簽中放置class ="external",這很容易忘記。 相反,你可以像這樣使用一點(diǎn)CSS:

a[href^="http://"] {
  background: url(/images/external.png) center right no-repeat;
  padding-right: 13px;
}

execcodegetcode

現(xiàn)在,這將使以http://開頭的網(wǎng)頁(yè)中的所有鏈接都具有外部鏈接圖標(biāo)。

有兩個(gè)注意的地方:

1)以http://開頭并包含您自己的域名的任何指向您自己網(wǎng)站的鏈接都將具有外部鏈接圖標(biāo)。我能弄清楚如何解決這個(gè)問題的唯一方法是使規(guī)則匹配以http://和網(wǎng)站域開頭的鏈接,將背景和填充設(shè)置回默認(rèn)值。

例如,要為我的博客執(zhí)行此操作,您可以執(zhí)行以下操作:

a[href^="http://howtostagehomes.com"] {
  background: none;
  padding-right: 0;
}

2)它無(wú)法在Internet Explorer 6中運(yùn)行。但是,你不用關(guān)心,IE6已經(jīng)沒人用了。

另外,使用Javascript也可以做到這一點(diǎn),Javascript可以作為后備使其適用于Internet Explorer 6。

您可能對(duì)以下文章也感興趣

標(biāo)簽: css  href  鏈接  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */