CSS是一種樣式表語言,可以用于控制文本和HTML元素的樣式。其中,CSS樹狀圖是指通過CSS實(shí)現(xiàn)的一種層次結(jié)構(gòu)的圖形展示,常用于組織結(jié)構(gòu)、文件目錄等信息的展示。
.tree { position: relative; padding-left: 20px; list-style: none; } .tree::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #ccc; } .tree li { margin: 0; padding: 8px 12px; position: relative; } .tree li::before { content: ''; position: absolute; top: 0; left: -10px; width: 10px; height: 100%; border-left: 1px solid #ccc; } .tree li::after { content: ''; position: absolute; top: 0; left: -11px; width: 10px; height: 100%; background-color: #fff; } .tree li:last-child::after { height: 8px; } .tree li.active { background-color: #f2f2f2; } .tree li.active::before { border-color: #4caf50; } .tree li.active::after { background-color: #4caf50; }
以上是實(shí)現(xiàn)CSS樹狀圖的樣式代碼,其中利用ul、li標(biāo)簽構(gòu)建一個層次結(jié)構(gòu),通過CSS實(shí)現(xiàn)各級元素的樣式及排列方式。