一花一世界 – CSS实例教程：树型列表的实现（上）

原文地址：Turning Lists into Trees

翻译整理：西米CC

在本例的学习中，我们将尝试把一个多重无序列表进行转换，表现为带线条连接的树型结构。

需要注意的是最终表现出来的结构和元素都是静态的，我们无法对其节点进行增删操作。首先在XHTML结构中，只是很规则的一个多重列表，除了在最外层的ul上应用了tree样式之外，没有附带任何的其它元素：

在设置CSS之前的效果如下:

在真正开始实现树型变换之前，我们首先要做的事情就是去掉列表项之前的小点，我们通过CSS中设置list-style-type属性为none来实现：

ul.tree, ul.tree ul {
list-style-type: none;
}

现在预览一下效果，各个项目前都没有了列表符号。现在我们要为每个列表项绘制竖线,这里我们先制作一张10像素高的图片：

我们把这张图片设置为ul的背景图片,并纵向平铺,这样我们就能使竖线在Y轴方向的高度和列表本身保持一致.对margin和padding我们也进行适当的调整,让ul及li的外观看起来更舒适一些：

ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
}

此时预览效果如下：

接下来我们制作一张T形的图片，并作为背景应用到各个列表项目上：

同时我们也要设置行高line-height属性来让列表项和图片的高度保持一致。为了让效果更加醒目,我们把文字的颜色设置为369粗体：

ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}

应用了背景和字体样式之后的列表效果：