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

2016-02-19 18:54 16 1 收藏

今天图老师小编给大家精心推荐个用CSS样式表打造不一样的超级链接教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

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

a[href^=”http:”] {  
 background:url(images/externalLink.gif) no-repeat right top;  
 padding-right:10px;  

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    上面这段代码的意思是:所有以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://www.tulaoshi.com/webkaifa/)

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

来源:http://www.tulaoshi.com/n/20160219/1619413.html

延伸阅读
在许多程序的关于对话框中,我们常可以看到超级链接式的标签,只须轻轻一点,就能立即启动电子邮件程序给作者写信,或者启动浏览器观看某主页,或者远程登录,或者自动链入新闻组 如果你苦于找不到实现这些功能的Delphi控件,又无法在帮助文件中找到相关主题,那不妨参照下文,亲手一试! 别看上述的超级链接功能繁多,其实用一条...
标签: 歌曲 网络 音乐
我们不一样昰什么梗? 我们不一样,网络流行语,该词出自2017年6月份由歌手大壮原创的一首歌曲,歌名就叫做《我们不一样》,歌词为“我们不一样,每个人都有不同的境遇,我们在这里,在这里等你,我们不一样,虽然会经历不同的事情。”是一句常见的自嘲语,常用于调侃自己和别人有很大反差。 我们不一样的梗什么时候用 该词常用在吐槽网...
标签: Web开发
CSS用样式表美化你的网页 第1天:选择什么样的DOCTYPE 前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符...
拍出不一样的人像   1.顺光 光线照在人脸上,能使影像更为立体、色彩更为艳丽,看腻了大家最喜欢的逆光照了吗?偶尔可以试试这样。不过测光要特别小心,最好使用M模式,必要时再减曝光,以免过度曝光。 2.远景 看腻了大头照了吗?来到一个漂亮的地方,多退几步,让整个美丽风光进去,还能观者找找美女在哪 ...
标签: 创意手工
原来水果图案的雨伞也可以自己制作!让那些颜色单一的雨伞,披上水果的可爱外衣吧,你会发现原本单调乏味的雨伞也可以瞬间变得迷人可爱~ 材料清单: -雨伞们 -宽胶带 -适用于布料上的颜料 -剪刀 柠檬雨伞: 1. 从雨伞上端到边缘贴上胶带,下面的宽度大一些。 2. 用白色颜料沿胶带涂抹,...

经验教程

191

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部