纯CSS打造的Family tree（族谱）

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

查看演示 下载源码

HTML

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

Html代码  

1. <div class="tree">   
2.     <ul>   
3.         <li>   
4.             <a href="#">Parent</a>   
5.             <ul>   
6.                 <li>   
7.                     <a href="#">Child</a>   
8.