纯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; 
} 

明盒开发

明盒开发未经允许,严禁转载本栏目内容本文经许可转载自软件工程专家网www.21cmm.com,未经CSDN许可,请勿随便转载,谢谢合作(一) 明盒结构  明盒定义了实现转换状态盒功能的过程。明盒和相应...
  • gigix
  • gigix
  • 2002-03-14 10:15:00
  • 1686

家谱系统(ASP,Access,CSS,html5)

  • 2013年02月27日 17:21
  • 367KB
  • 下载

家谱树,ASP,CSS,ACCESS

  • 2016年03月16日 08:32
  • 2.09MB
  • 下载

【最新正确版】家谱系统、CSS3、ASP、ACCESS

  • 2016年03月22日 17:04
  • 1.21MB
  • 下载

家谱族谱网站ASP源代码

  • 2011年02月18日 19:09
  • 10.76MB
  • 下载

九种常用家谱格式

  • 2017年02月05日 09:14
  • 2.07MB
  • 下载

Css-Family-Tree,家谱系统

http://thecodeplayer.com/walkthrough/css3-family-tree(外国网站) 使用这个,做一个家谱系统,有没有人做过? 我是网站爱好者,一直在想着...
  • chenxian5808
  • chenxian5808
  • 2017-01-02 13:56:37
  • 168

利用树制作的简易家谱

#ifndef PARENTSCHILDREN_H_INCLUDED #define PARENTSCHILDREN_H_INCLUDED #include #include #define Maxs...
  • lidekun9132
  • lidekun9132
  • 2016-11-21 20:26:10
  • 2088

真正可用的Excel家谱录入表,要生成漂亮的世系图,含测试数据。

  • 2016年10月28日 11:45
  • 895KB
  • 下载

无限级分类之迭代查找家谱树

利用迭代来查找家谱树。建议新手辅助理解。
  • xiao_tommy
  • xiao_tommy
  • 2016-11-16 13:10:13
  • 444
收藏助手
不良信息举报
您举报文章:纯CSS打造的Family tree(族谱)
举报原因:
原因补充:

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