纯css实现树形结构
2024-09-05 04:18:15
纯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;
}
最新文章
- jQuery实现发送短信验证码后60秒倒计时
- 正确导入android-support-v4.jar的方法
- OS X 使用技巧——访问所有的键盘功能
- HDU 5679 Substring 后缀数组判重
- C 高级编程3 静态库与动态库
- 【CF】3B Lorry
- 数据库 MySQL进阶之索引
- SDN第一次上机作业
- 笔记:Spring Cloud Hystrix 异常处理、缓存和请求合并
- redis 资料
- maven scope使用和理解
- Hibernate 再接触 性能优化
- Oracle 故障整理
- Docker 学习笔记 ---Docker组件
- Vagrant (2) —— 基本安装与配置(下)
- Servlet 串联过滤器
- Android Studio 集成 TFS,实现安卓移动开发的持续集成和交付(DevOps)
- DataTable根据字段去重
- 【转】二叉树、B树、B-树、B+树、B*树
- servlet配置及其生命周期