html - 如何像这样在 html 中制作一个漂亮的目录

Question

任何人都可以看到这个并猜测这个漂亮的 toc 是如何用 HTML 创建的？

你认为它是手工完成的，还是使用软件制作的？

http://diveintohtml5.info/table-of-contents.html

查看源代码并没有给我太多提示。我是 HTML 的新手。

Answer 1

这很简单，他为li元素使用了一个虚线背景，而不是被另一个元素中包裹的文本覆盖，例如我在一个span带有白色背景的这里包裹

演示

CSS

li {
    display: block;
    background-image: url(http://diveintohtml5.info/i/dot.png);
    background-repeat: repeat-x;
    background-position: 0 10px;
}

li span {
    background: white;
    padding-right: 5px;
}