用CSS样式表打造不一样的超级链接

王朝学院·作者佚名  2009-05-21
窄屏简体版  字體: 小  |  中  |  大  |  超大  

我们要达到的效果是,给所有指向非本站的链接都加上一个小图标以告诉用户点击这个链接会让你离开本站,这是一个外部链接。当然这可能通过比较复杂的JavaScript来实现,但是我们现在可以通过CSS 3的属性选择符来实现这个功能。

a[href^=”http:”] {

background:url(images/externalLink.gif) no-repeat right top;

padding-right:10px;

}

上面这段代码的意思是:所有以http:开头的链接都会加上一个小箭头的图标,提示用户这是一个外部链接,用户点击会离开本站。可以说,这个功能是非常人性化,突出了Web设计的易用性。

当然,这是针对指向本站的链接都使用了相对地址的。如果指向本站的链接也是以http:开头的,或者有使用既有使用绝对地址又有使用相对地址的怎么呢?我们可以使用如下代码:

a[href^=”http:”] {

background:url(images/externalLink.gif) no-repeat right top;

padding-right:10px;

}

a [href*=”www.dudo.org”] {

background:none;

padding:0;

}

上面这两条规则是:所有以http:开头的均加上外部链接的图标,后面紧接着以http://www.dudo.org/ 开头的都不使用,自然相对地址因为不是以http开头所有不会出现箭头图标。

文章来源:http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航