用CSS控制不同类型链接的显示

TC16年前 (2010-09-01)网站与博客559
用CSS区分内外链接是我花了点力气才实现的,放到这里留个底,供自己和其他有此需要的站长和博客主参考。
最初的目的是用css区分内外链接,给外链增加一个相应的图标
后来发展为论坛、百科等也分出来了==
不过图标制作不能,跟fz捣鼓不出什么结果,还是请jk出山了==
/* links */
a
{
background:url(http://www.gmly.info/wp-content/themes/Quarx/images/icon_popup.gif) no-repeat right top;
padding-right:14px;
}
这一步是给所有的链接都加一个图标指示
下面就来把内链分出去
a[href^="http://www.gmly.info"]
{
background-image:none;
padding-right:0px;
}
照此思路,分站的链接也可以区分出来
a[href^="http://wiki.gmly.info"]
{
background:url(http://www.gmly.info/wp-content/themes/Quarx/images/icon_wiki.gif) no-repeat right top;
padding-right:14px;
}
a[href^="http://bbs.gmly.info"]
{
background:url(http://www.gmly.info/wp-content/themes/Quarx/images/icon_smf.gif) no-repeat right top;
padding-right:14px;
}
a[href^="http://trle.gmly.info"]
{
background:url(http://www.gmly.info/wp-content/themes/Quarx/images/icon_trle.gif) no-repeat right top;
padding-right:14px;
}
如果模板里用到了其他链接,也需要区分出来,否则也会带上外链图标,显然会影响效果。
提取它们的语法和上面也是一样的,例如:
a[href^="http://feed.gmly.info"]
{
background-image:none;
padding-right:0px;
}
a[href^="http://countt.51yes.com"]
{
background-image:none;
padding-right:0px;
}
a[href^="http://creativecommons.org"]
{
background-image:none;
padding-right:0px;
}
a[href^="http://wordpress.org"]
{
background-image:none;
padding-right:0px;
}
还有个问题就是,如果页面中使用了锚链接,则也会出现外链图标。
锚链接的html代码和上面的不同。
设锚(例如“返回页顶”的锚):<a name="top">
链接(例如“返回页顶”链接):<a href="#top">
要把它们“提取”出来,格式则是:
a[name]
{
background-image:none;
padding-right:0px;
}
a[href^="#"]
{
background-image:none;
padding-right:0px;
}
标签: 百度空间
返回列表

上一篇:SMF的修改

下一篇:WordPress的修改

相关文章

虽然QQ空间很脑残……

虽然QQ空间很脑残……

但我大概会搬过来!太多人用这个了啊,初中朋友、高中朋友、大学朋友……我大概会搬过来!!...

BSP的RSS订阅

BSP的RSS订阅

刚才打开 G00gle Reader,又看到在新浪订阅的博客的更新。新浪大概能位列最小心眼的BSP之列了,到现在都不允许在阅读器里查看图片。在阅读器里看到这类“反盗”图,还是相当碍眼的。相比防止“流量”被消耗,新浪这样倒更像是防止“流量”损失。虽然“防盗”措施各大BSP都有(包括百度),但考虑到RS...

SMF Wiki

SMF Wiki

虽然这玩意儿貌似早就不更新了,不过有站点在用。收着留个底。http://www.linuxmintusers.de/index.php?action=wiki;page=Main_Pagehttp://los.turtleshellprod.com/index.php?action=wiki;pag...

废话一堆

废话一堆

本来是想整理一下的,但又犯懒了(貌似我总会说这两个字,囧)。直接乱七八糟发上来了。内容是中文站这次的改版,涉及的是wordpress、smf、dokuwiki。以下是废话一堆,别说我没提醒你首先是域名。因为原先的域名解析坏掉了(因此才导致了pic.gmly.info无法访问),所以换回了美国的Go...

搞定

搞定

无意中点了一下空间设置,看到“”,发现我这N久不登录百度,前几天一登录就删了好几个相册(和搜狐的重复了)的家伙居然是这三万分之一(难怪相册显示的“已用空间”一下子缩水了好多)……百度对我还真不错呀,输入“古墓丽影”,中文站还经常是排名第一的~~以后就用百度的东西了~~NT说:这么轻易就被收买啦?是啊...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法和观点。