div和CSS可以幫助我們很方便的實(shí)現(xiàn)樹的效果。我們先看一下HTML代碼：

<div class="tree">
<ul>
<li>Parent</li>
<ul>
<li>Child</li>
<li>Child</li>
<ul>
<li>Grandchild</li>
<li>Grandchild</li>
</ul>
</ul>
</ul>
</div>

我們定義了一個class為tree的div，它包含了一個ul，兩個li以及一個嵌套的ul。這樣就可以構(gòu)成一個簡單的樹形結(jié)構(gòu)。接著我們設(shè)置CSS樣式。

.tree ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #333;
position: relative;
}
.tree ul ul {
margin: 0;
padding: 0;
position: absolute;
top: 1em;
left: 2em;
}
.tree:before {
content: "";
display: block;
border-left: 1px solid #ccc;
height: 100%;
position: absolute;
left: 0;
}
.tree li:before, .tree li:after {
content: "";
display: inline-block;
width: 0;
height: 0;
position: absolute;
top: 1em;
left: 0.5em;
border: 0.5em solid transparent;
z-index: 1;
}
.tree li:before {
border-top-color: #ccc;
border-bottom: 0;
}
.tree li:after {
border-top: 0;
border-bottom-color: #ccc;
top: 2em;
}
.tree li:last-child:before {
border-top: 0;
}

這樣我們就實(shí)現(xiàn)了一個簡單的樹形結(jié)構(gòu)。我們使用了相對定位、絕對定位、偽元素和嵌套u(yù)l等技巧來實(shí)現(xiàn)樹形結(jié)構(gòu)的樣式。希望這篇文章對你有幫助。