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

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

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

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

把数字加到CSS中

由于尺寸较大,因此我们需要为每个清单项目加上一点内外补丁,以便为数字图片留下足够的空间让它们显示成背景,我们也会在每个步骤下面加上一条浅灰色的边线.

我们能以继承选择器 #recipe li将这些规则套用到位于#recipe 中的<li>上,这让我们不必为每个id重复定义这些规则.

#recipe {
  list-style-type: none;
  }
#recipe li {
  padding: 10px 50px;
  margin-bottom: 6px;
  border-bottom: 1px solid #ccc;
  }

把这些设定值套用到清单内的每一个<li>之后,接着我们就能为每个id指定对应的数字图片.

#recipe {
  list-style-type: none;
  }
#recipe li {
  padding: 10px 50px;
  margin-bottom: 6px;
  border-bottom: 1px solid #ccc;
  }
#one {
  background: url(ol_1.gif) no-repeat 6px 50％;
  }
#two {
  background: url(ol_2.gif) no-repeat 2px 50％;
  }
#three {
  background: url(ol_3.gif) no-repeat 3px 50％;
  }
#four {
  background: url(ol_4.gif) no-repeat 0px 50％;
  }
#five {
  background: url(ol_5.gif) no-repeat 6px 50％;
  }

你应该发现每张图片指定的水平位置都有些差异,这是因为每张图片的宽度都不一样,跟我选用的字体有关系,为了补正这个差异,我们把每张图片视需要稍微向右移动一点,让每个数字旁边的句号能够排列整齐.

加上6px 50％会让图片摆放在离左边6像素,上下50％的位置上,让它对齐水平中线.

结果

图8-11是以一般浏览器查看最终结果的样子,每个图片都显示在项目的左侧,而每个步骤的底部都有一条灰色直线,进一步把它们区分开来.

图8-11 使用一般浏览器查看的最终效果

借着几张图片,几条CSS规则,我们为结构化的有序清单加上了些自定的样式:再度证明我们能把不重要的图片放在标签之外,便于稍后更新.

结论

除了无需清单的变化之外,有序清单,定义清单也能提供相应的语义结构,便利的样式选择,发挥你的想象力,试着用这几种不同的清单类型 -- 同时以CSS为基础结构加上华丽的外衣吧.

在最后,你会得到能在各处正确显示的坚实基础,同时又能以CSS位功能强大的浏览器修改显示效果.

接着阅读下一章：Chapter 9 精简标签

第一页上一页 3 4 5 6

投稿

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

猜你喜欢