自定义圆点符号

去掉预设的样式,并且使用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 第三层项目加上自定义圆点小图片

加上边框

接着在第二层清单的左边加上点状边框,完成我们的网站地图,这能进一步提示读者顶层项目有属于它的子项目.

为了只在第二层清单达成这个效果,将加上这些规则:

#sitemap {
  font-size: 140%;
  font-weight: bold;
  color: #f63;
  }
#sitemap li {
  list-style: none; /* turns off bullets */
  }
#sitemap li ul {
  margin: 6px 15px;
  padding: 0 15px;
  font-size: 90%;
  color: #000;
  border-left: 1px dotted #999;
  }
/* for third-level */
#sitemap li ul li ul {
  border: none;
  }
#sitemap li ul li ul li {
  font-weight: normal;
  padding-left: 16px;
  background: url(bullet.gif) no-repeat 0 50%;
  }

我们稍微调整了第二层的外补丁,并且加上了点状边线,在这个规则之后,再使用border:none;来去掉第三层的边框.

图9-4是改好字体,边框与图片的清单效果.

图9-4 完成的清单样式,第二层加上点状边线

在设计大纲之类的清单时,嵌套<ul>是个结构恰当,容易指定样式的解决方法.为顶层<ul>指定独特的id滞后,我们能把分别制定每层样式的任务交给CSS进行,而不需要加上多余的显示效果标签.而设计样式的可能性也远超出这个简单的示例.

图9-5是相同的CSS应用在稍大型网站地图上的效果,由于CSS根据层级指定样式,因此标签内容的写法完全相同,项目会随着嵌套状层级不同而自动选用适当的样式.

图9-5 以CSS与嵌套状清单制作的网站地图扩充版

结论

在本章开头,我们探索了两个精简标签源代码的做法,一个是使用继承选择器,另一个是扔掉多余的<div>标签.

集成选择器不必使用多余,容易让标记源代码变得难以阅读的分类属性,同时移除直接内涵唯一性块级元素的<div>标签能让我们尽可能的节省字节,还能让构建复杂版面的源代码更加简单.

使用这些做法看起来只能省下几个字节,但是开始对整个网站应用这些做法之后,节省的成果就开始积累,你可以把它当成另一种编写灵活,结构化标记的好工具.

除了精简标签源代码外,我们还看了继承选择器如何为使用嵌套状清单的网站地图指定样式,你能为每一层级大纲指定独特的样式,而不必使用额外的分类属性,再次节省几个字节,同时让未来更新,重新设计样式的工作更加轻松.

精简标签代码万岁!