css3 树状图

CSS3 树状图是一种展示数据的效果，它可以将数据按照树形结构展示出来，更加清晰直观。下面我们将介绍一下如何使用 CSS3 创建树状图。

.tree ul {
    list-style:none;
    margin:0;
    padding:0;
position:relative}
.tree ul:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    left:20px;
    border-left:1px solid #ccc;
}
.tree li {
    margin:0;
    padding:10px 5px 0 5px;
position:relative}
.tree li:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:100%;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    transform:translateX(-50%);
}
.tree li:last-child:before {
    height:20px;
    border:none;
}
.tree li:after {
    content:"";
    display:block;
    position:absolute;
    top:30px;
    left:0;
    width:20px;
    height:calc(100% - 30px);
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    transform:translateX(-50%);
}
.tree li:last-child:after {
    border:none;
}
.tree li a {
    display:inline-block;
    background:#f1f1f1;
    color:#000;
    padding:5px 10px;
    border-radius:5px;
text-decoration:none}
.tree li a:hover {
    background:#ccc;
}
    

上面的 CSS 样式中，我们使用了伪元素来绘制线条以及箭头，利用绝对定位来让它们与文本对齐。我们还给链接添加了背景颜色等样式，以便更好地区分每个节点。

下面是我们的 HTML 代码：

div class="tree">
    ul>
    li>
    a href="#">
    Parent Item/a>
    ul>
    li>
    a href="#">
    Child Item/a>
    /li>
    li>
    a href="#">
    Child Item/a>
    /li>
    /ul>
    /li>
    li>
    a href="#">
    Parent Item/a>
    ul>
    li>
    a href="#">
    Child Item/a>
    /li>
    li>
    a href="#">
    Child Item/a>
    /li>
    li>
    a href="#">
    Child Item/a>
    /li>
    /ul>
    /li>
    /ul>
    /div>
    

我们使用了一个 div 元素来包含整个树形结构，使用了无序列表与列表项将每个节点分隔开来，其中一些列表项还包含了自己的子节点。

在浏览器中预览你的代码，你会看到一棵树状图呈现在你面前。你可以通过调整 CSS 样式来自定义这个树形结构，以满足你的需要。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！