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

爱覆水难收123

爱覆水难收123

2016-02-19 18:54

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

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

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

    上面这段代码的意思是:所有以http:开头的链接都会加上一个小箭头的图标,提示用户这是一个外部链接,用户点击会离开本站。可以说,这个功能是非常人性化,突出了Web设计的易用性。
     当然,这是针对指向本站的链接都使用了相对地址的。如果指向本站的链接也是以http:开头的,或者有使用既有使用绝对地址又有使用相对地址的怎么呢?我们可以使用如下代码:

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

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开头所有不会出现箭头图标。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

《星辰变》不一样的细节 不一样的NPC

网络游戏
《星辰变》不一样的细节 不一样的NPC

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一样的太阳不一样的防晒

防晒
一样的太阳不一样的防晒

初乳就是不一样

电脑网络
初乳就是不一样

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

关于CSS样式表

Web开发
关于CSS样式表

PS打造后期不一样的梦幻悬浮

电脑网络
PS打造后期不一样的梦幻悬浮

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS 3备受期待的 8 大功能

CSS 3备受期待的 8 大功能

我不明媚不倾城

我不明媚不倾城
下拉加载更多内容 ↓