手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

Rel与CSS的联合使用

首页 > Misc >

说实话,rel在我眼里除了link CSS的时候用过,其他时候我还真没用过。根本不知道REL是用来干嘛 的。看了这篇文章才知道原来Rel还可以这么用。

原文是

Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。

Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用 CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  

页面中他呈现这个样子

大小: 3.47 K
尺寸: 238 x 148
浏览: 1840 次
点击打开新窗口浏览全图

因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。

大小: 5.38 K
尺寸: 169 x 115
浏览: 1875 次
点击打开新窗口浏览全图

过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS

XML/HTML代码
  1. <style>  
  2.  .c,.b {background:url(01.png) right center no-repeat;}  
  3.  .b {background-image:url(02.png);}  
  4. </style>  
  5. <ul>  
  6. <li><a href="#" rel="civil" class="c">小李</a></li>  
  7. <li><a href="#" rel="party" class="b">局长</a></li>  
  8. </ul>  
现在,我们可以利用REL属性以及属性选择器来完成这个工作。
CSS代码
  1. a[rel~="civil"]{background:url(01.png) rightright center no-repeat;}  
  2. a[rel~="party"]{background:url(02.png) rightright center no-repeat;}  
同时,我们的HTML结构也可以剔除那些多余的样式了。
XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  
另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。

--EOF--

最后一句话实在让人寒心,不过总算也可以这样的做了,再过一两年,还有IE6的存在吗?IE6的时间够长了吧?好象从02年开始到现在,都经历了8年左右的时间了,居然还没有被消亡。习惯这东西真害人。。。。

原文地址为:rel与CSS的联合使用,不过其实我更喜欢第二幅图后面的小图标

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: 前端, css, rel

« 上一篇 | 下一篇 »

只显示10条记录相关文章

犹豫:是否采用Yii把sablog重构 (浏览: 24862, 评论: 5)
CSS中media标签的作用 (浏览: 24549, 评论: 0)
9 个基于JavaScript 和 CSS 的 Web 图表框架 (浏览: 24344, 评论: 0)
前端开发大众手册 (浏览: 24125, 评论: 2)
好东西,不得不贴,继续上传两个文件 (浏览: 23182, 评论: 0)
CSS背景 (浏览: 22974, 评论: 0)
Table2CSS Converter (浏览: 22972, 评论: 3)
CSS让你的IE浏览器崩溃 (浏览: 21065, 评论: 0)
CSS Position Fixed for IE6 (浏览: 20719, 评论: 0)
CSS透明属性详解 (浏览: 20324, 评论: 0)

2条记录访客评论

謝謝分享

Post by 星际百货 on 2010, October 24, 1:17 AM 引用此文发表评论 #1

无意中进来的,经常上网易的吧,第二幅图我很喜欢

Post by hozi on 2010, February 11, 1:23 AM 引用此文发表评论 #2


发表评论

评论内容 (必填):