老肥谈如何运用好链接

幸福收藏夹写了一篇很好的文章 如何运用好链接? 我很赞同,于是写一篇我对链接使用的建议,给大家参考。

  • 内部链接

    内部链接一般是推荐一下读者可能会感兴趣的以前的文章,可以增强关联性。它可以一定程度上打击抄袭,虽然有些人会把链接抹掉,但总比没有的好。我的 favicon 设计系列 被很多人转载过,其中不乏故意隐匿出处的人,但由于插图多,他们没工夫挨个删,里面的内部链接也跟着幸存下来了。还有一篇 如何为 blog 建立一个高效的标签系统,我故意在文中留下了一个纯文本的链接(当然也是为了展示 URL 的需要),它也在抄袭者手中幸存了。在这样一个大环境里,对付抄袭没有什么特别有效的办法,但是也不要老是在文中提自己的名字——照顾一下正经读者的感受吧。

  • 外部链接

    外部链接就是方便读者点击相关内容的,很重要。最好给链接加上 title 属性(鼠标放上去显示的文字),描述一下这是一个什么内容,比如写上对方文章的标题。这样读者可以自己决定看不看,有个预览。

  • 是否在新标签中打开

    在本页打开的链接,读者可以自行决定是否新标签,而在新标签打开的链接,基本上是强制性的。有个现象,就是国内网站的新标签链接远远多于国外网站,从门户到论坛,大家已经习惯被剥夺选择权了。这个很难一刀切,在新标签打开吧,容易招致反感;在本页打开吧,读者可能就忘了回来,况且新标签是有实际作用的,当读者需要新老都保留的时候。我这里是内部链接本页打开,外部链接新标签。当然不是说就推荐您这么做,但我的个人忠告是内部链接最好不要新标签,内部和外部是两个系统,我不希望我的标签栏被一个网站占据。

  • 给读者一个新标签提示

    更进一步的说,一个链接是否新标签并不直观,给读者选择权的同时,是否能够像链接的 title 那样,有个预览和心理准备?这里我推荐一个 WordPress 插件 External Links, 它可以给外部链接自动加上这样的一个弹出小图标。如果您不是 WordPress, 或者像我一样希望不通过插件就实现这样的效果,也可以通过 CSS, 给链接的 a 标签加上 class="external", 然后添加 CSS 描述:

    a.external {
      background: url(...) no-repeat center right;
      padding-right: 13px;
    }

    对以前的文章,我导出 xml, 搜索替换 target="_blank" 为 target="_blank" class="external" 再导入就搞定了。类似的,我还做了一个 下载图标

  • 已访问过的链接的区分

    这是一个看上去不显眼,实际上挺重要的东西,读者可以从链接的外观区分是否访问过,提高阅读效率。通常的办法有:改变颜色,加下划线、下点线等。我的代码:

    a, a:link {
      color: #bb6f02;
      text-decoration: none;
    }
    a:visited {
      text-decoration: underline;
    }
    a:hover, a:active {
      text-decoration: underline;
      color: #e58802;
    }

    链接没有下划线,鼠标放上去有,访问过的链接也有。

差不多说完了,希望能对您有所帮助。祝天下所有小盆友们,和童心未泯的老盆友们节日快乐 😛

最新评论

  • 高午饭 博主现在的社交网络有么,想关注您呢 我为什么爱 Twitter
  • 西贝博客 很好的建议!谢谢分享! 如何为 blog 建立一个高效的标签系统
  • 苹果 老罗露脸了,哈哈,支持他现在的事业 我为什么爱 Twitter
  • 飞之梦 不错,第一次看到这些效果,以后要用一用了。 CSS 文字阴影在网页设计中的应用
  • QQ地带 大牛,pansou也是用的ajax search,为什么他不会被墙呢,因为他调用的地址是ip,不是直接的谷歌域名。请问怎么实现。 打造完美的 ajax 版 Google 自定义搜索

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 17 条评论

  

你果然是CSS达人...


fisio 回复: 不够达,差得远...

有更好的方法,不过,需要JS才能在IE6显示。有空我也来弄个...


fisio 回复: 我觉得这样显示已经很好了啊,ie6也是正常的。你指的是什么效果呢?

厉害

果然心细啊:)学习学习:)

我说的是:
a[href^"http:"] {background:url(your-external-links-pic.gif) no-repeat right top;padding-right:16px;}

可以解决这个问题,而不用手动,当然,这个只是一个例子,更需要更详细.IE面要JS来实现,因为IE不支持"[..]"的样式选择...

而效果,一样! 最重要的是免手动,哈哈...


fisio 回复: 想法不错 :)

新标签提示图片不错,嘿嘿,慢慢研究一下...

sofish说的那个方法不错,我以前也用过,不过在IE6下链接换行会出现问题,背景图片跑到文字中间了


fisio 回复: 大概是 IE 下的 padding 问题,用兼容标准的 DTD 模式会不会正常?

学习中……

很好很强大!

功夫不负有心人啊,终于找到n久没找到的教程了,3ks肥硕,不会象我也一样肥硕吧


fisio 回复: 我不胖的...

a[target="_blank"] {
background: transparent url(http://p.blog.csdn.net/images/p_blog_csdn_net/pongba/186037/o_external.gif) no-repeat scroll right center;
padding-right: 13px;
}


fisio 回复: 这样好像有个问题,就是带有新标签属性的图片链接也会被这么处理 :)

属性选择器~IE的残念呀~

:rainbow: 写的不错,受用了。

很标准的网页设计理论。拜读。

再次拜读老肥文章,不错!真不错!以后会经常过来学习的! :love:

用内部连结真不失为一个好方法,谢啦


有 1 篇其他博客的文章引用了本文

  1. 10年11月6日测试 | 咸鱼足迹