CSS实现树谱图

 树谱图的实现，是利用列表嵌套的原理，折线使用伪类::before及::after实现

<div class="tree">
    <ul class="treeul">
        <li>
            <div class="dv">0</div>
            <ul>
                <li>
                    <div class="dv">1</div>
                    <ul>
                        <li>
                            <div class="dv">1-1</div>
                        </li>
                        <li>
                            <div class="dv">1-2</div>
                        </li>
                        <li>
                            <div class="dv">1-3</div>
                        </li>
                        <li>
                            <div class="dv">1-4</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="dv">2</div>
                </li>
                <li>
                    <div class="dv">3</div>
                    <ul>
                        <li>
                            <div class="dv">3-1</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.dv{width: 90px;height: 145px;border: 1px solid #ccc;display: inline-block;font-size: 16px;position: relative;}
ul{overflow: hidden;padding-top: 20px;position: relative;}
li{float: left;text-align: center;position: relative;padding: 20px 5px 0 5px;font-size: 0;}
.tree li:only-child{padding: 0;}
.tree ul ul::before{content: "";position: absolute;left: 50%;top: 0;width: 0;height: 20px;border-left: 1px solid #ccc;}
li::before{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{left: 50%;top: 0;right: 0;
    border-left: 1px solid #ccc;
}
li:first-child::after{border-radius: 5px 0 0 0;}
.treeul li:first-child::before,.treeul li:last-child::after{border:none}
.treeul li:last-child::before{border-right:1px solid #ccc;border-radius: 0px 5px 0 0;}
.treeul li:only-child::before{border: none;}