个人中心
gpt4 book ai didi

html - 具有多个 parent 和不同线型的家谱

转载 作者：太空宇宙 更新时间：2023-11-04 14:05:21 24 4
gpt4 key购买 nike

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

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

有人知道我该怎么做吗？

编辑:

我构建此网页的结构属于以下类型:

Father
Mother
n Number of children
children[n]

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

感谢您的帮助!

最佳答案

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

<!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 :)*/

关于html - 具有多个 parent 和不同线型的家谱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13074994/

24 4 0
文章推荐： javascript - javascript 中的 3d 数组
文章推荐： java - Struts2 忽略 applicationContext 中的 Action 类值属性
文章推荐： Jquery 选择从 json 添加值
文章推荐： java - 检查循环是否在没有条件中断的情况下运行
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com