介绍 & lt; ul 类=癲omtree"比;
,,,,,,,& lt; li>
,,,,,,,,,,,1级菜单
,,,,,,,,,,,& lt; ul>
,,,,,,,,,,,,,,,& lt; li> 2级菜单& lt;/li>
,,,,,,,,,,,,,,,& lt; li>
,,,,,,,,,,,,,,,,,,,2级菜单
,,,,,,,,,,,,,,,,,,,& lt; ul>
,,,,,,,,,,,,,,,,,,,,,,,& lt; li> 3级菜单& lt;/li>
,,,,,,,,,,,,,,,,,,,,,,,& lt; li> 3级菜单& lt;/li>
,,,,,,,,,,,,,,,,,,,& lt;/ul>
,,,,,,,,,,,,,,,& lt;/li>
,,,,,,,,,,,& lt;/ul>
,,,,,,,& lt;/li>
,,,,,,,& lt; li>
,,,,,,,,,,,1级菜单
,,,,,,,,,,,& lt; ul>
,,,,,,,,,,,,,,,& lt; li> 2级菜单& lt;/li>
,,,,,,,,,,,,,,,& lt; li> 2级菜单& lt;/li>
,,,,,,,,,,,& lt;/ul>
,,,,,,,& lt;/li>
,,,& lt;/ul> css ul.domtree,
,,,,,,,ul.domtree ul {
,,,,,,,,,,,保证金:,0;
,,,,,,,,,,,填充:,0,0,0,2 em;
,,,,,,,}
,,,,,,,ul.domtree li {
,,,,,,,,,,,list-style:,没有;
,,,,,,,,,,,位置:,相对;
,,,,,,,}
,,,,,,,ul.domtree>李:第一个孩子:before {
,,,,,,,,,,,边框样式:,none none solid 没有;
,,,,,,,}
,,,,,,,ul.domtree 李:before {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,:,-0.01 em;
,,,,,,,,,,,左:,-0.7 em;
,,,,,,,,,,,,宽度:0.5 em;
,,,,,,,,,,,,身高:0.615 em;
,,,,,,,,,,,边框样式:,none none solid 固体;
,,,,,,,,,,,,边框宽度:0.05 em;
,,,,,,,,,,,,边框颜色:# aaa级;
,,,,,,,}
,,,,,,,ul.domtree 李:没有(胎):after {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,:,0.7 em;
,,,,,,,,,,,左:,-0.7 em;
,,,,,,,,,,,底部:,0;
null
null
null
null
这篇文章将为大家详细讲解有关纯css如何实现树形结构,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>纯css实现属性结构
css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收缩以及复选框效果还得配合js来实现。其实展开和收缩就是一个点击元素其子元素隐藏和显示的切换。
效果图
html结构
