如何使用纯CSS3来生成家谱（family tree）

日期：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代码

...........

来源：如何使用纯CSS3来生成家谱（family tree）