zoukankan      html  css  js  c++  java
  • 如何使用纯CSS3来生成家谱(family tree)

    日期:2012-7-28  来源:GBin1.com

    今天我们将要介绍的是如何在不使用FlashJavaScript的 情况下,用纯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)

    欢迎访问GBin1.com
  • 相关阅读:
    模块3 re + 正则表达式
    模块2
    模块1
    super
    MRO,C3算法
    日志,固定格式
    异常处理,MD5
    类的约束
    反射
    异常处理MR5
  • 原文地址:https://www.cnblogs.com/gbin1/p/2614892.html
Copyright © 2011-2022 走看看