UI培训之使用计数器创建号码内容

一．使用计数器创建号码内容 如果您想插入一系列递增的值，比如说“美女1，美女2，美女3，美女4……”，您就可以使用计数器在每个列表项的前面插入递增的序号值。CSS代码如下： ol { list-style-type:none; counter-reset:sectioncounter; } ol li:before { content:"美女" counter(sectioncounter) "： "; counter-increment:sectioncounter; } HTML代码如下：

1. 
2. 

您可以狠狠地点击这里：content产生递增序号demo 说明： 1. ol标签应用counter-reset属性，li标签应用counter-increment属性，值均为sectioncounter，再配合content属性，以及counter计数器就可以实现递增的效果了。 2. 如果您指定了元素display:none，则content下的计数器不会产生递增值。 3. 当然，如果浏览器不支持此方法，那么就不会有数字出现，您使用firebug或是之类的工具查看真实的HTML时不会看到产生的数值，不要有疑惑，content属性动态生成的内容是纯粹的装饰而已，虚假的表象。 4. 如果您对CSS计数器感兴趣，想深入了解，可以参见David Storey一篇优秀的文章：Automatic numbering with CSS Counters。 二．为多语言内容插入正确的引号 不同的语言使用不同的引号字符。比如英文的引号就是""，而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如，我们需要对下面的些文字添加其对应语言的引号，该怎么办呢？

It’s only work if somebody makes you do it.

Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.

欢迎来到上海，欢迎参观世博会！

我们不妨试试下面的代码： /* 为不同语言指定引号的表现 */ :lang(en) > q {quotes:'"' '"';} :lang(no) > q {quotes:"«" "»";} :lang(ch) > q {quotes:"“" "”";} /* 在q标签的前后插入引号 */ q:before {content:open-quote;} q:after {content:close-quote;} 您可以狠狠地点击这里：content生成对应语言字符demo 此技术可以应用于各类元素，而不仅仅是q标签，另外，Safari 3以及IE7（以及以下）是不支持此技术的。 三．用图片替换文字 关于图片替换技术，您可以参见这里：several image replacement techniques，里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法，使用的是content。 您可以参见下面的代码： div.logo { content:url(logo.png); } 这种图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。 然而，就目前而言，还是有不少需要注意的： 1. 你不能对图片进行重复或平铺，或是使用image sprite。 2. 目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用，因为这些浏览器支持所有元素的content方法，而不仅仅局限于:after或是:before。 替换的图片无法应用alt属性，所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。 四．显示相对应的链接图标 指的是针对不同的链接类型，在链接的后面显示对应链接类型的图标，例如，链接的对象是一个图片，则显示图片的小图标，如果链接对象是视频，则显示视频小图标，如果链接就是个URL网页链接，则显示链接的小图标。您可以参见下面的代码： CSS代码： p a[href $=".pdf"]:after { content:url(../image/icon_pdf.png); } p a[rel = "external"]:after { content:url(../image/icon_link.png); } HTML代码：

您可以查看此PDF文件：web站点的性能优化.pdf，或是在线查看，点击这里。


本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui