首页精美html5树形结构

精美html5树形结构

时间: 2023-07-22 08:17:04 浏览: 85

这是一个简单的HTML5树形结构示例： ```html <!DOCTYPE html> <html> <head> <title>HTML5 Tree Structure</title> <style> ul { list-style: none; margin: 0; padding: 0; } .tree li { margin: 0; padding: 10px 0 0 20px; position: relative; } .tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: auto; } .tree li::before { left: -10px; border-left: 1px solid #ccc; height: 100%; width: 1px; } .tree li::after { left: -10px; border-top: 1px solid #ccc; height: 20px; width: 11px; } .tree li:last-child::before { height: 30px; } .tree ul li::before { content: ''; position: absolute; top: 0; left: -20px; border-left: 1px solid #ccc; height: 100%; width: 1px; } .tree ul li::after { content: ''; position: absolute; top: 10px; left: -20px; border-top: 1px solid #ccc; height: calc(100% - 10px); width: 11px; } .tree span { background-color: #fff; padding: 5px 10px; border-radius: 5px; display: inline-block; } </style> </head> <body> <ul class="tree"> <li> Parent 1 <ul> <li> Child 1 <ul> <li> Grandchild 1 </li> <li> Grandchild 2 </li> </ul> </li> <li> Child 2 </li> </ul> </li> <li> Parent 2 <ul> <li> Child 3 </li> <li> Child 4 </li> </ul> </li> </ul> </body> </html> ``` 你可以在浏览器中查看此示例的效果。

阅读全文