在網(wǎng)頁開發(fā)中，樹形目錄是一種常見的頁面結(jié)構(gòu)。它可以幫助用戶快速定位到所需的內(nèi)容，并提高閱讀體驗(yàn)。通常，我們可以使用JavaScript來生成樹形目錄，但是今天我們將介紹如何使用純CSS來實(shí)現(xiàn)這一功能。

/* 樹形目錄樣式 */
/* 無序列表樣式 */
ul {
list-style: none;
margin-left: 0;
padding-left: 20px; /* 控制縮進(jìn) */
}
/* 列表項(xiàng)樣式 */
li {
position: relative;
}
/* 列表項(xiàng)連接線樣式 */
li:before {
content: "";
position: absolute;
top: 0;
left: -20px; /* 控制左側(cè)邊距 */
border-left: 1px solid #000;
height: 100%;
}
/* 最后一個(gè)列表項(xiàng)連接線樣式 */
li:last-child:before {
height: 50%;
}
/* 列表項(xiàng)圓點(diǎn)樣式 */
li:after {
content: "";
position: absolute;
top: 50%;
left: -10px; /* 控制左側(cè)邊距 */
border: 10px solid transparent;
border-left: 10px solid #000;
transform: translateY(-50%);
}

以上樣式代碼中，我們使用了

標(biāo)簽來創(chuàng)建樹形結(jié)構(gòu)，然后使用
• 標(biāo)簽來定義每個(gè)節(jié)點(diǎn)。使用:before和:after選擇器來添加連接線和圓點(diǎn)，并使用position屬性控制它們的位置。

  最后，現(xiàn)在你已經(jīng)擁有了一個(gè)簡單的純CSS樹形目錄。你可以在其中添加自己的內(nèi)容和樣式來自定義樹形目錄，并為你的頁面增添美觀和易用性。