[翻译]标记语言和样式手册 Chapter 9 精简标签（6）

现在清单的每一层有自动缩小的font-size了,接着加上一些圆点符号.

自定义圆点符号

去掉预设的样式,并且使用background属性为第三层项目加上装饰性的圆点符号.首先为所有<li>标签去掉预设的清单样式,接着再为第三层项目指定内镜图片.为了进一步区别,也将为第三层设定font-weight:normal -- 覆盖掉清单的bold设定值.

#sitemap {
  font-size: 140％;
  font-weight: bold;
  color: #f63;
  }
#sitemap li {
  list-style: none; /* turns off bullets */
  }
#sitemap li ul {
  font-size: 90％;
  color: #000;
  }
/* 第三层 */
#sitemap li ul li ul li {
  font-weight: normal;
  padding-left: 16px;
  background: url(bullet.gif) no-repeat 0 50％;
  }

图9-3是完成的网站地图,在第三层<li>标签上使用了自定义圆点符号,普通字体.在左边加上了16像素的内补丁,以便留下装饰用圆点图片的显示位置(同时也多留了一些空白).也告诉浏览器从左边0像素,上方50％开始显示图片,这基本上会使图片左侧对齐,并对齐文字中线.虽然我们能在此以像素指定垂直对齐,但是以百分比制定的话,在文字大小改变时,圆点图片仍能维持正确的排列效果.

图9-3 第三层项目加上自定义圆点小图片