纯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.                     <ul>   
9.                         <li><a href="#">Grand Child</a></li>   
10.                     </ul>   
11.                 </li>   
12.                 <li>   
13.                     <a href="#">Child</a>   
14.                     <ul>   
15.                         <li><a href="#">Grand Child</a></li>   
16.                         <li>   
17.                             <a href="#">Grand Child</a>   
18.                             <ul>   
19.                                 <li><a href="#">Great Grand Child</a></li>   
20.                                 <li><a href="#">Great Grand Child</a></li>   
21.                                 <li><a href="#">Great Grand Child</a></li>   
22.                             </ul>   
23.                         </li>   
24.                         <li><a href="#">Grand Child</a></li>   
25.                     </ul>   
26.                 </li>   
27.             </ul>   
28.         </li>   
29.     </ul>   
30. </div>   

 

CSS

我们使用css中的 :before、:after 两个伪类的content属性来构建元素间的连接线，同时使用了css3实现元素的圆角效果，并加上了鼠标滑上hover效果，这样鼠标滑向族谱中的一个 节点元素，与之相关的后辈元素都会有hover效果，完整的css代码如下：

Html代码  

1. .tree ul {   
2.     padding-top: 20px; position: relative;   
3.        
4.     transition: all 0.5s;   
5.     -webkit-transition: all 0.5s;   
6.     -moz-transition: all 0.5s;   
7. }   
8.    
9. .tree li {   
10.     float: left; text-align: center;   
11.     list-style-type: none;   
12.     position: relative;   
13.     padding: 20px 5px 0 5px;   
14.        
15.     transition: all 0.5s;   
16.     -webkit-transition: all 0.5s;   
17.     -moz-transition: all 0.5s;   
18. }   
19.    
20. /*We will use ::before and ::after to draw the connectors*/   
21.    
22. .tree li::before, .tree li::after{   
23.     content: '';   
24.     position: absolute; top: 0; right: 50%;   
25.     border-top: 1px solid #ccc;   
26.     width: 50%; height: 20px;   
27. }   
28. .tree li::after{   
29.     right: auto; left: 50%;   
30.     border-left: 1px solid #ccc;   
31. }   
32.    
33. /*We need to remove left-right connectors from elements without    
34. any siblings*/   
35. .tree li:only-child::after, .tree li:only-child::before {   
36.     display: none;   
37. }   
38.    
39. /*Remove space from the top of single children*/   
40. .tree li:only-child{ padding-top: 0;}   
41.    
42. /*Remove left connector from first child and    
43. right connector from last child*/   
44. .tree li:first-child::before, .tree li:last-child::after{   
45.     border: 0 none;   
46. }   
47. /*Adding back the vertical connector to the last nodes*/   
48. .tree li:last-child::before{   
49.     border-right: 1px solid #ccc;   
50.     border-radius: 0 5px 0 0;   
51.     -webkit-border-radius: 0 5px 0 0;   
52.     -moz-border-radius: 0 5px 0 0;   
53. }   
54. .tree li:first-child::after{   
55.     border-radius: 5px 0 0 0;   
56.     -webkit-border-radius: 5px 0 0 0;   
57.     -moz-border-radius: 5px 0 0 0;   
58. }   
59.    
60. /*Time to add downward connectors from parents*/   
61. .tree ul ul::before{   
62.     content: '';   
63.     position: absolute; top: 0; left: 50%;   
64.     border-left: 1px solid #ccc;   
65.     width: 0; height: 20px;   
66. }   
67.    
68. .tree li a{   
69.     border: 1px solid #ccc;   
70.     padding: 5px 10px;   
71.     text-decoration: none;   
72.     color: #666;   
73.     font-family: arial, verdana, tahoma;   
74.     font-size: 11px;   
75.     display: inline-block;   
76.        
77.     border-radius: 5px;   
78.     -webkit-border-radius: 5px;   
79.     -moz-border-radius: 5px;   
80.        
81.     transition: all 0.5s;   
82.     -webkit-transition: all 0.5s;   
83.     -moz-transition: all 0.5s;   
84. }   
85.    
86. /*Time for some hover effects*/   
87. /*We will apply the hover effect the the lineage of the element also*/   
88. .tree li a:hover, .tree li a:hover+ul li a {   
89.     background: #c8e4f8; color: #000; border: 1px solid #94a0b4;   
90. }   
91. /*Connector styles on hover*/   
92. .tree li a:hover+ul li::after,    
93. .tree li a:hover+ul li::before,    
94. .tree li a:hover+ul::before,    
95. .tree li a:hover+ul ul::before{   
96.     border-color:  #94a0b4;   
97. }