纯CSS打造的Family tree（族谱）

Family tree（族谱），也称家谱，用来记录家族世系繁衍辈份关系。本文结合实例，不借助任何js脚本，使用纯CSS打造一个漂亮的Family tree（族谱），也可以应用的企业组织架构图中。

查看演示 下载源码

HTML

我们使用div#tree来包含整个族谱结构，内部以ul和li元素构建数据源。实际开发中这些族谱数据源可以从数据库中读取，就像得到一个无限级的分类列表，以下是主要的html结构。

<div class="tree"> 
    <ul> 
        <li> 
            <a href="#">Parent</a> 
            <ul> 
                <li> 
                    <a href="#">C