日期:2012-7-28 来源:GBin1.com
今天我们将要介绍的是如何在不使用Flash 和JavaScript 的 情况下,用纯CSS来完成一个可组织数据或者家谱。这里使用一个非常简单的标签 - 嵌套列表li。 其中伪元素用于绘制之间家庭成员关系,它还具有悬停的效果 - 用在显示整个家族图谱中。 [5月1日,2012年]注:此版本为当前最新版本,并支持IE浏览,如果家族中有更多的成员,也可以轻松的加入。希望大家喜欢这个CSS实现的家族图 谱,当然你也可以使用它来生成一个组织结构图
HTML代码
<!-- We will create a family tree using just CSS(3) The markup will be simple nested lists --> <div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li> <a href="#">Grand Child</a> </li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul> </div>
CSS代码
...........