本文我給大家介紹如何使用CSS和HTML就可以將一個多級無序列表的節點展現成樹狀結構。樹狀結構我們在很多項目中要應用，如公司組織架構圖、無限級分類等等。
純css實現屬性結構
css實現屬性結構的思路是利用偽類實現樹形結構連接線，如果想實現點擊展開和收縮以及復選框效果還得配合js來實現。其實展開和收縮就是一個點擊元素其子元素隱藏和顯示的切換。
效果圖
html結構
<ul class="domtree"> <li> 1級菜單 <ul> <li>2級菜單</li> <li> 2級菜單 <ul> <li>3級菜單</li> <li>3級菜單</li> </ul> </li> </ul> </li> <li> 1級菜單 <ul> <li>2級菜單</li> <li>2級菜單</li> </ul> </li> </ul>
css
ul.domtree, ul.domtree ul { margin: 0; padding: 0 0 0 2em; } ul.domtree li { list-style: none; position: relative; } ul.domtree>li:first-child:before { border-style: none none solid none; } ul.domtree li:before { position: absolute; content: ''; top: -0.01em; left: -0.7em; width: 0.5em; height: 0.615em; border-style: none none solid solid; border-width: 0.05em; border-color: #aaa; } ul.domtree li:not(:last-child):after { position: absolute; content: ''; top: 0.7em; left: -0.7em; bottom: 0; border-style: none none none solid; border-width: 0.05em; border-color: #aaa; }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
