CSS樹形圖是一種基于HTML和CSS的分層結構圖,用于顯示樹狀數據結構。通常,樹形結構用于組織和表示層次化的信息。使用CSS樹形圖,可以展示網站導航、目錄結構、文件夾樹等等。
.tree { padding-left: 1em; position: relative; margin: 0; list-style: none; } .tree:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.5em; border-left: 1px solid lightgray; } .tree li { margin: 0; padding: 0 1em; line-height: 2em; color: #333; font-weight: bold; position: relative; } .tree li:before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.5em; border-left: 1px solid lightgray; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree li:last-child:after { height: 0; } .tree li:before { content: ""; position: absolute; top: 1em; left: -5px; width: 10px; height: 0; border-top: 1px solid lightgray; } .tree li:after { content: ""; position: absolute; top: 2.2em; left: -5px; width: 10px; height: 0; border-top: 1px solid lightgray; } .tree li:last-child:before { height: 1em; bottom: auto; }
以上是一個簡單的CSS樹形圖的樣式代碼,它使用了偽元素:before和:after來實現分割線和豎線的效果。每個樹形節點都是一個li元素,并且需要添加padding-left屬性來為子級節點騰出空間。
通過修改這些CSS屬性,可以自定義樹形圖的樣式。例如,可以更改分割線顏色和粗細、調整字體大小和顏色以及添加動畫效果等等。
上一篇dw中css中文亂碼