這次給大家帶來純css實現樹形結構,純css實現樹形結構的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文我給大家介紹如何使用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; }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
使用html和css實現康奈爾筆記
css的進度條文字根據進度漸層