位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 8 再谈清单（6）

[翻译]标记语言和样式手册 Chapter 8 再谈清单（6）

作者：zhaozy　来源：3user.com　发布时间：2008-01-29 13:16:00　

标签：样式,标记,css,手册,清单

技巧延伸

让我们复习一下本章最初的有序步骤清单:

<ol>
  <li>Chop the onions.</li>
  <li>Saute the onions for 3 minutes.</li>
  <li>Add 3 cloves of garlic.</li>
  <li> Cook for another 3 minutes.</li>
  <li>Eat.</li>
</ol>

没有加上任何CSS的话,浏览器的显示效果与图8-2差不多,就与本书其他的结构化标记语法示例一样,在导入CSS的时候,有序清单是一组容易指定样式的标签组.

我们知道,由于使用了正确的结构,因此不支持CSS或把CSS关闭的浏览器也能正确显示出清单的内容.

让我们装饰的花俏一些,先来自定每个项目之前的编号吧.

识别每个项目

为了让我们能存取每个清单项目,把它的编号换成更华丽的样式,我们需要为每个<li>标签加上id,我们也会为整个有序清单加上id,让我们能为这个清单指定特定样式,而不影响其他所有的<ol>.

<ol id="recipe">
  <li id="one">Chop the onions.</li>
  <li id="two">Saute the onions for 3 minutes.</li>
  <li id="three">Add 3 cloves of garlic.</li>
  <li id="four"> Cook for another 3 minutes.</li>
  <li id="five">Eat.</li>
</ol>

现在我们能识别每个项目了,因此我们对清单内每个元素的样式都进行完整控制.值得一提的是,在此为每个项目加上独特的id之后,我们就无法依赖有序清单的"自动编号"功能了.如果稍侯在中间插入新步骤的话,我们就得自己变更往后步骤的id值,在此事先提醒一下.

自定数字

为清单建立自定数字的第一个步骤是用list-style-type属性去掉#recipe元素预设的自动产生数字的效果:

#recipe {
list-style-type: none;
}

图8-9 是用上面这条规则去掉数字之后的清单显示效果.

图8-9 用CSS关闭数字编号之后的有序清单

现在我们已经防止自动产生数字了,接着就能以自己的数字图片代替.用photoshop(或是你喜欢的绘图工具)建立5个GIF图片,一个数字一张图.图8-10是我用红色Prensa字体建立的五个数字.

图8-10 用在有序清单内的五个GIF图片

第一页上一页 3 4 5

7 下一页

投稿

[翻译]标记语言和样式手册 Chapter 8 再谈清单（6）

猜你喜欢