二、准备工作
整个树形控件由四部分构成：图形，CSS样式定义，HTML框架代码，JavaScript代码。从图一可以看出，树形控件需要三个图形，分别表示折叠的分支(closed.gif)、展开的分支(open.gif)和叶节点(doc.gif)。
下面是树形控件要用到的CSS样式定义：
< style>
body{
font: 10pt 宋体,sans-serif; color: navy; }
.branch{
cursor: pointer;
cursor: hand;
display: block; }
.leaf{
display: none;
margin-left: 16px; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
< /style>
CSS规则很简单：body规则设置了文档的字体和前景(文字)颜色。branch规则的用途是：当鼠标经过拥有子节点的节点时，指针会变成手的形状。之所以要定义两个cursor属性，是因为IE和Netscape使用不同的属性名称。在leaf规则中设置display属性为none，这是为了实现叶节点(不含子节点的最终节点)的折叠效果。在脚本代码中，我们通过把display属性设置成block显示出节点，设置成none隐藏节点。
