Macji Pro2010

记录一些应该记录的东东

css计数器

October 3, 2008 - by Macji - HTML/CSS/JS/PHP - css, 计数器

这是css2的东西,但我才知道,我。。。其实是在看阅读器里Opera Developer Community的一个文章,原来这样也行,发现其实是css2,马上去看了嗷嗷书的目录,他也是这么些的。虽然不怎么用得到,但还是记录一下。


当我们设计一个书的目录的时候,你是否会一个一个写上编号呢?其实可以利用css计数器。比如这个目录应该怎么写呢?


  1. Web标准不是神话
    1. 理解Web标准
      1. Web标准是什么
      2. 错误的思维
      3. 无障碍网页倡议(WAI)
    2. 量化Web标准
      1. 大部分通过W3C校验的网站只是伪标准
      2. Web标准要求一览表
      3. 如果量化
    3. 为什么选择Web标准
    4. CSS为什么着火
      1. CSS 的作用
      2. CSS 布局 VS. 表格布局
    5. 我能否学好Web标准
      1. 我需要具备什么素质和条件才能学好Web标准
      2. 学习的重点与难点
    6. 欲善其事,先利其器
      1. 软件的选择
      2. 调试环境

这些编号都是css写上去的,但唯有IE不支持。。 - -


ol{
	counter-reset: ordered; /* 指定一个计数器,名字叫ordered */
	list-style:none; /* 去掉默认 */
}
ol li:before {
	counter-increment: ordered; /* 使用已命名的计数器(ordered)  如果是 ordered 2 那累加2,可以是负数*/
	content:"第"counters(ordered,"")"章 "; /* 在li之前输出计数器(ordered) */
}
ol li li:before {
	counter-increment: ordered;
	content: counters(ordered,".") " "; /* 在li里的li之前输出计数器(ordered)*/
}

地址:http://labs.aoao.org.cn/book/web-standards-design/catalog.html


举一反三:http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/

3 条评论»