老肥谈如何运用好链接

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

  • 内部链接

    内部链接一般是推荐一下读者可能会感兴趣的以前的文章,可以增强关联性。它可以一定程度上打击抄袭,虽然有些人会把链接抹掉,但总比没有的好。我的 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
  • Kaylin Pra quem leva a sério esses argumentos desses links, é melhor nunca mais assistir um filme de Holywood. Todos sabem que Disney era conaorvsder para os padrões de lá. 人脸标签!体验 Picasa 网络相册新功能
  • Justice | | | | | inmidderen film izleme sitesi bedava filmler canlı film seyret binlerce filmler online sinema izletir beleÅŸ filmler filmini full izle ücretsiz sinema izleme sitesi filmini izle direk filmler son çıkan filmler vizyondan sonra full sinema izleme sitesi filmleri tam izle indirmeden bedava filim filmler full ve bedava 非常有创意的献血慈善广告
  • Mikel Congratulations on your spicy new name; and the expansion of your services.As a long time patron of ‘Chef Sazon’, I look forward to Roho Kitchen’s future success. Whether it is cooking classes, food and beverage pairing classes,event catering, or pop- up reratusants— I know that Roho Kitchen will always deliver an amazing culinary experience!. Semih Sayginer的开伦表演
  • Charlotte Gee willekirs, that's such a great post! 超牛的flash忍者游戏: N-Game

发表您的评论

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

: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日测试 | 咸鱼足迹