纯CSS打造的Family tree(族谱)

转载 2017年06月27日 11:45:53
<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> 

.tree ul { 
    padding-top: 20px; position: relative; 
     
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 
 
.tree li { 
    float: left; text-align: center; 
    list-style-type: none; 
    position: relative; 
    padding: 20px 5px 0 5px; 
     
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 
 
/*We will use ::before and ::after to draw the connectors*/ 
 
.tree li::before, .tree li::after{ 
    content: ''; 
    position: absolute; top: 0; right: 50%; 
    border-top: 1px solid #ccc; 
    width: 50%; height: 20px; 
} 
.tree li::after{ 
    right: auto; left: 50%; 
    border-left: 1px solid #ccc; 
} 
 
/*We need to remove left-right connectors from elements without  
any siblings*/ 
.tree li:only-child::after, .tree li:only-child::before { 
    display: none; 
} 
 
/*Remove space from the top of single children*/ 
.tree li:only-child{ padding-top: 0;} 
 
/*Remove left connector from first child and  
right connector from last child*/ 
.tree li:first-child::before, .tree li:last-child::after{ 
    border: 0 none; 
} 
/*Adding back the vertical connector to the last nodes*/ 
.tree li:last-child::before{ 
    border-right: 1px solid #ccc; 
    border-radius: 0 5px 0 0; 
    -webkit-border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
} 
.tree li:first-child::after{ 
    border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
} 
 
/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
    content: ''; 
    position: absolute; top: 0; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 20px; 
} 
 
.tree li a{ 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 11px; 
    display: inline-block; 
     
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 
 
/*Time for some hover effects*/ 
/*We will apply the hover effect the the lineage of the element also*/ 
.tree li a:hover, .tree li a:hover+ul li a { 
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4; 
} 
/*Connector styles on hover*/ 
.tree li a:hover+ul li::after,  
.tree li a:hover+ul li::before,  
.tree li a:hover+ul::before,  
.tree li a:hover+ul ul::before{ 
    border-color:  #94a0b4; 
} 

家谱等人物关系图的绘制

1. 使用 smartdraw 绘制图形展示请见:Genogram - What is a Genogram? 下载地址:Top reasons SmartDraw is perfect for ge...
  • lanchunhui
  • lanchunhui
  • 2017年05月09日 23:21
  • 777

组织机构或家谱前端设计

  • 2017年05月12日 17:14
  • 816KB
  • 下载

递归 迭代 得到家谱树 子孙树

  • u012111815
  • u012111815
  • 2015年04月10日 23:42
  • 1012

【家谱】项目开发总结

这次家谱项目开发中,在代码方面和合作开发方面都有很多收获,现阶段性的总结,为今后做积淀。...
  • Francis123580
  • Francis123580
  • 2016年08月18日 22:13
  • 529

纯CSS打造的Family tree(族谱)

Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系。本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中。 ...
  • miaozhenzhong
  • miaozhenzhong
  • 2017年10月23日 18:18
  • 141

无限级分类之递归查找家谱树

该代码为利用递归查找家谱树,但是建议使用迭代查找效果会更好。
  • xiao_tommy
  • xiao_tommy
  • 2016年11月16日 13:05
  • 703

族谱(java-ssm)

项目名称:族谱系统       代码行数:9,000+               工作日:14 Day 关键技术:Java  (ssm)、MySql、Maven、nginx、分布式、高并发 项目模块...
  • zhong2zheng0319
  • zhong2zheng0319
  • 2017年05月24日 15:04
  • 399

基于树状图的族谱程序

功能:初始建立一个祖先 在树状图里可以任意切换到一个人,使他生孩子 杀人只有祖先有权利,杀掉后,他的子女也死了 可以查找族里容易一个孩子 可以查看全族 源代码 #include #inc...
  • wjb123sw99
  • wjb123sw99
  • 2017年07月30日 15:14
  • 324

家谱图-二叉树

// FamilyMap_BTree.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #define fileName "familyMa...
  • Codelee1995
  • Codelee1995
  • 2014年12月03日 17:02
  • 1866

二叉树建立族谱

#include #include #include #include using namespace std;  struct person//个人信息 {     int n...
  • u013248828
  • u013248828
  • 2014年11月27日 19:11
  • 1573
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯CSS打造的Family tree(族谱)
举报原因:
原因补充:

(最多只允许输入30个字)