具有多个父母和不同线型的家谱

【问题标题】：Family tree with multiple parents and different line types具有多个父母和不同线型的家谱
【发布时间】：2012-12-16 01:15:08
【问题描述】：

我正在尝试使用 HTML 创建一个简单的家谱（如果需要，我还可以包含 CSS 和 Javascript）。我想实现这样的目标：

http://www.gmrv.es/~sschvartzman/Sara_C._Schvartzman/example.png

有人知道我怎么做吗？

编辑：

我构建这个网页的结构是这样的：

Father
Mother
n Number of children
children[n]

我想自动构建这个图形。我希望每个人都有一个指向另一个网页的链接，但我认为一旦我有了这个数字，这将很容易。

感谢您的帮助！

【问题讨论】：

    标签： html tree


    【解决方案1】：

    我终于设法创建了一个多父家谱图。 

    <!DOCTYPE html> <html> <head><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta name="description" content=""><meta name="author" content=""><link href="tree.css" rel="stylesheet">
<title>Family Tree</title> </head><body> <h1>Schvartzman family tree</h1>
<div class="tree">
    <ul class="pf">
        <li class="parent">
            <a  class="f_nolink">
                <div class="person"">Claudia<br>Avila<span>(1961 - )</span></div> 
            </a>
        </li>
        <li class="divorce">
            <ul class="c">              <li>
                    <a  class="m_nolink">
                        <div class="person"">Sebastian<br>Berdichevsky<span>(1981 - )</span></div> 
                    </a>
                </li>
                <li>
                    <a href="@F62327212@.html" class="f">
                        <div class="person"">Sara<br>Berdichevsky<span>(1986 - )</span></div> 
                    </a>
                </li>
                <li>
                    <a  class="m_nolink">
                        <div class="person"">Manuel<br>Berdichevsky<span>(1987 - )</span></div> 
                    </a>
                </li>
                <li>
                    <a  class="m_nolink">
                        <div class="person"">Sergio<br>Berdichevsky<span>(1989 - )</span></div> 
                    </a>
                </li>
            </ul>
        </li>
        <li class="parentWithAncestor">
            <a href="@F62638334@.html" class="m">
                <div class="person"">Eduardo<br>Berdichevsky<span>(1961 - )</span></div> 
            </a>
        </li>
        <li class="marriage">
            <ul class="c">              <li>
                    <a  class="f_nolink">
                        <div class="person"">Abigail<br>Berdichevsky<span>(2001 - )</span></div> 
                    </a>
                </li>
                <li>
                    <a  class="m_nolink">
                        <div class="person"">Tobias<br>Berdichevsky<span>(2003 - )</span></div> 
                    </a>
                </li>
                <li>
                    <a  class="m_nolink">
                        <div class="person"">Iamin<br>Berdichevsky<span>(2007 - )</span></div> 
                    </a>
                </li>
            </ul>
        </li>
        <li class="parent">
            <a  class="f_nolink">
                <div class="person"">Carolina<br>Overlar<span>(1978 - )</span></div> 
            </a>
        </li>
    </ul>
</div>

<br>
</body> </html>

    使用 CSS 文件：

    .tree * {margin: 0; padding: 0; }

body {

    font-family: arial, verdana, tahoma;
    font-size: 12px;
    color: #666;
    background-color:#fff;

}

.tree{
    white-space:nowrap;
    padding-bottom: 250px;
}

.tree ul {
    padding-top: 5px; position: relative;
    display: table;
    margin: 0 auto;
    font-size:0;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    /*float: left; */
    display:inline-block;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 70px 5px 0 5px;
    font-size: 12px;

    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: 70px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after {
    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 li:last-child::before{
    border-right: 2px 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;
}


.tree li li:only-child::before {
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
    border-right:none;
}
/*
.tree ul.p>li::before {
    border:none;
    content: '&';
    left:0;
    width:100%; 
    }

.tree ul.p>li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: none;
    width: 50%; height: 20px;
}

.tree ul.p>li::after{
    border-left: none;
}
*/
/* Use pf to indicate that its a child of another family. */
.tree ul.pf>li::before {
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
    border-right:none;
    }

.tree ul.pf>li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: none;
    width: 50%; height: 20px;
}

.tree ul.pf>li::after{
    border-left: none;
}



/*Time to add downward connectors from parents*/

.tree ul.c {
    padding-top: 70px; 
    }


.tree ul ul.c::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ccc;
    width: 0; height: 20px;
    border: none;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 0px;
    text-decoration: none;
    color: #666;
    background-color:#fff;
    /*background-image:url(circle.jpg)*/
    /*color: #fff;
    background-color:#999;*/
    display: inline-block;
    min-width:50px;

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

/* red border on contacts
.tree li a.o{
    border: 1px solid #f66;
}
*/

.tree li a span{
    display:block;
    font-size: 10px;

}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*.tree li a.m:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }   
.tree li a.f:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; } 

.tree li a:hover+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; } 
.tree li a:hover+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; } 

.tree li a.md:hover { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }    
.tree li a.fd:hover { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }    

.tree li a:hover+ul li a.md { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }    
.tree li a:hover+ul li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/  

.tree li a.m{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}
.tree li a.m_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #c8e4fb; box-shadow:1px 1px 2px #000}
.tree li a.f_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #ffc0cb; box-shadow:1px 1px 2px #000}
.tree li a.m_dead_nolink{width:80px;height:80px;border-radius:15px;font-size:10px;color:#000;text-align:center;background: #F1F9FE; box-shadow:1px 1px 2px #000}
.tree li a.f_dead_nolink{width:80px;height:80px;border-radius:50px;font-size:10px;color:#000;text-align:center;background: #FFF0F2;box-shadow:1px 1px 2px #000}

.tree li.marriage{ height:0px; border: 1px; border-style: solid; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.marriage::before{border: none}
.tree li.divorce{ height:0px; border: 2px; border-style: dashed; border-color: #000; color: #000; padding: 0 ; background: #FFF; }
.tree li.divorce::before{border: none}
.tree  ul.pf>li.parent::before{border: none}
.tree  ul.pf>li.parentWithAncestor::before{border-top: none;}

.tree div.person
{
    display:inline-block;
    vertical-align:central;
    padding:20px 0px;
    width:80px; 
}
/*
.tree li a.m:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #c8e4fb; box-shadow:0 0 4px #222 inset}
.tree li a.f:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #ffc0cb; box-shadow:0 0 4px #222 inset}
.tree li a.m_dead:hover{width:100px;height:100px;border-radius:15px;font-size:12px;color:#000;text-align:center;background: #F1F9FE; box-shadow:0 0 4px #222 inset}
.tree li a.f_dead:hover{width:100px;height:100px;border-radius:50px;font-size:12px;color:#000;text-align:center;background: #FFF0F2; box-shadow:0 0 4px #222 inset}
*/
/*.tree li a.m { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } 
.tree li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }   

.tree li a.md { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; }  
.tree li a.fd { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }  

.tree li a+ul li a.m { background: #c8e4fb; color: #000; border: 1px solid #94a0b4; }   
.tree li a+ul li a.f { background: #ffc0cb; color: #000; border: 1px solid #94a0b4; }*/ 


/*Thats all. I hope you enjoyed it.
Thanks :)*/

    【讨论】：

      【解决方案2】：

      我为你开始了它，只是为了让你得到图片。其余的应该可以自己搞定。

      <!DOCTYPE html>
<html><head><title>Diagram</title></head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1260" height="765">
    <defs
     id="defs4">
    <linearGradient
         id="linearGradient5189"
         osb:paint="solid">
        <stop
             style="stop-color:#000000;stop-opacity:1;"
             offset="0"
             id="stop5191" />
    </linearGradient>
</defs>

<metadata
     id="metadata7">
    <rdf:RDF>
        <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
        </cc:Work>
    </rdf:RDF>
</metadata>
<g

     id="layer1"
     transform="translate(0,-287.36218)">
    <rect
         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:23.50000000000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
         id="rect2985"
         width="236.3757"
         height="236.3757"
         x="125.25892"
         y="132.6445"
         transform="translate(0,287.36218)" />
    <path
         style="fill:none;stroke:#000000;stroke-width:23.88199997;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
         d="M 246.47723,713.3291 245.60768,587.95193 244.45692,422.02699"
         id="path5199"
         sodipodi:nodetypes="ccc" />
    <path
         style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:75,25;stroke-dashoffset:105"
         d="m 793.9799,471.04561 -545.48237,0"
         id="path5246"
         transform="translate(0,287.36218)" />
    <path
         sodipodi:type="arc"
         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:105"
         id="path5248"
         sodipodi:cx="717.71338"
         sodipodi:cy="259.41864"
         sodipodi:rx="122.73354"
         sodipodi:ry="122.73354"
         d="m 840.44692,259.41864 a 122.73354,122.73354 0 1 1 -245.46708,0 122.73354,122.73354 0 1 1 245.46708,0 z"
         transform="translate(68.690373,264.12867)" />
    <path
         style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
         d="m 787.87838,398.79348 0,-72.73098"
         id="path5250" />
    <image
         y="652.83923"
         x="775.43933"
         id="image5271"
         xlink:href=

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAABiCAYAAAClDHhhAAAABHNCSVQICAgIfAhkiAAAAElJREFU
aIHtzUENACAMBLCDoGn+FWGBeSDZrzXQleRl2J4OJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKR
SCQSiUTy5VTVnU4aD+ADVQ9kdZUAAAAASUVORK5CYII=
"
         height="117.1929"
         width="25" />
    <path
         style="fill:none;stroke:#000000;stroke-width:26.86911964;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
         d="m 245.97214,741.68118 0,16.7063"
         id="path5274" />
    <path
         style="fill:none;stroke:#000000;stroke-width:25;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 126.65969,249.12565 234.84816,2.63875"
         id="path5314"
         transform="translate(0,287.36218)" />
</g>

</svg>

</body>
</html>

      【讨论】：

      • 这很好，但它是一个家谱，所以我必须制作许多这样的 html 页面，而且它必须是自动的。有没有更简单的方法？
      • @Sara 是的，但是为了回答（以及可能为什么你得到低票），你必须扩大你的问题。例如，您的数据结构是什么样的？
      • 也许我可以使用您的代码自动构建家庭。我会尝试。谢谢！
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode