显示不同类型的链接

ck的博客看到不一样的外链样式,突然想起先前看的书精通CSS-高级Web标准解决方案中利用css显示不同样式的章节,在ilmilk同学这还能看到全文+demo效果。

在做之前,起先是想利用jquery的选择器来实现添加外链样式,但仔细研究下ck的blog的样式发现,不是用js实现,思索再三,决定还是采用class来实现外链的样式。原因有以下几个:

1.利用jquery的属性选择器,可以很方便的实现区分站内和站外的链接,坏处是对js支持不算很好的浏览器(如手机浏览器,弱弱的uc….)访问时会看不到外链的样式,效果不是很好。

2.利用css的属性选择器来实现,比用js来实现有相当大的优点,但是要用到css3的属性选择,ie6表示无能为力….

3.如果要支持ie6的话又必须用到javascript,这相当的纠结了。

采用css的class就能很好的解决,这些问题了。因为本人比较懒就直接拿ck的外链样式了。

但是在添加链接的class name时却犯难了,我是自己手动添加class还是在mce编辑器插入/编辑链接里添加一个样式呢?

人都是懒惰的,所以我想在插入/编辑链接,这样我就不用自己手动添加了,插入链接时选择一个下拉的链接是多么的惬意啊,但是我寻遍了wp目录的js源代码,就是没办法找到添加class name的地方,找到WordPress修改外部链接补遗,还以为能实现我的功能,没想到却只是添加一个rel属性,大失所望,最后没办法了,只能使用我的杀手锏了,安装了tinymce-advanced插件,这个插件几乎可以替换自带的有点弱的mce了,还带了n多的高级功能,默认就添加了高级的链接管理,对本来的插入编辑链接的进行了扩展,可以添加事件属性,id,class一坨的自定义东东,最最重要的是可以安然无恙的和语法高亮codecolorer插件”和平”共处!!看这里开启CodeColorer的可视化插入代码功能

这是一个外链样式

这是一个下载文档的链接

下面实现的css代码:
[cce_html]
.outsite{
background:url(images/common.png) no-repeat right -126px;
padding-right:28px;
}
.zip,.c{
background:url(images/common.png) no-repeat right -216px;
padding-right:28px;
}
[/cce_html]

“显示不同类型的链接”的5个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注