纯CSS和HTML打造树结构

本期文章我给大家介绍如何使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构。树状结构我们在很多项目中要应用,如公司组织架构图、无限级分类等等。

查看演示 下载源码

HTML

我们以某个公司的部门组织结构为例,其实就是一个无限级分类,我们首先定义好HTML结构,它有ul li组成,代码应该像这样:

<ul class="tree">
    <li>研发中心
        <ul>
            <li>北京研发部</li>
            <li>深圳研发部
                <ul>
                    <li>产品1组</li>
                    <li>产品2组</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>销售部
        <ul>
            <li>售前</li>
            <li>售后</li>
            <li>代理分区
                <ul>
                    <li>东北区</li>
                    <li>华北区</li>
                    <li>华南区</li>
                    <li>华中区</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>财务部</li>
    <li>人事部</li>
</ul>
知识兔

我们要把这样一个无序列表转换成树状外观,需要使用3张小图片来连接各个节点,使得很容易看出各个节点间的层级关系,父子关系还是兄弟关系。

准备好三张小图片。

CSS

首先,我们给每个<ul>元素设置竖线图片,这样每个ul就有一条长长的竖线。然后给每个<li>元素设置T型图片,最后一步,就是给最后一个li节点设置L型闭合树结构,整个CSS代码如下:

ul.tree, ul.tree ul {
 list-style-type: none;
 background: url(images/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(images/node.png) no-repeat;
 color: #369;
 font-weight: bold;
}
ul.tree li:last-child {
 background: #fff url(images/lastnode.png) no-repeat;
}
知识兔

怎么样,很简洁的代码就实现了树状结构的展示。当然,实际项目中,我们可能还会给树状结构加上动态效果,比如折叠与展开树分支,读取与渲染无限级树状结构等等,zhishitu接下来会有文章介绍,敬请期待。

计算机