纯css实现树形结构
纯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;
}
纯css实现树形结构的更多相关文章
- CSS实现树形结构 + js加载数据
看到一款树形结构,比较喜欢它的样式,就参照它的外观自己做了一个,练习一下CSS. 做出来的效果如下: li { position: relative; padding: 5px 0; margin:0 ...
- ThinkPHP第二十天(getField用法、常用管理员表结构、树形结构前小图标CSS)
1.getField($fields,$sepa=null) A:当$fields为1个字段,$sepa=null的时候,返回一个符合条件的记录的字段. B:如果要取得所有符合条件记录字段,需要$se ...
- VUE实现Studio管理后台(七):树形结构,文件树,节点树共用一套代码NodeTree
本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- C# EasyUI树形结构权限管理模块
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...
- 纯CSS tooltip 提示
一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
随机推荐
- AD域环境搭建
1.安装Windows server服务器 我安装的是Windows server 2012 Standard x64 下载地址:https://pan.baidu.com/s/1dZ_B5JIEit ...
- 用gcd库函数求最大公约数
如何直接调用库函数来求最大公约数呢? 1.首先看怎样求两个数的最大公约数 要注意gcd()前面是两个“_” !!! #include<bits/stdc++.h> using namesp ...
- 乐字节Java循环:循环控制和嵌套循环
乐字节小乐上次讲完了Java反射,接下来小乐给大家讲述Java循环. 循环有以下四部分: 一.循环控制 1. do..while 直到型 ( 先执行后判断) ,结构为: 先执行循环体,后判断布尔表达式 ...
- [转帖][思路/技术]Mimikatz的多种攻击方式以及防御方式
[思路/技术]Mimikatz的多种攻击方式以及防御方式 https://bbs.ichunqiu.com/thread-53954-1-1.html 之前学习过 抄密码 没想到还有这么多功能. ...
- 十大经典排序【Java实现,手工作坊式】
终于把排序这个硬骨头,但是又很基础的知识点,自己手撕了一遍!之前,使用Python看着算法导论的书手撕过一遍,印象不是很深刻,容易忘记!好记性不如烂笔头!多自己思考解决问题 1,交换类CAS[最简单] ...
- Uwl.Admin开源框架(二)
Uwl.Admin开源框架基于QuartzNet定时任务模块的实现 Quartz.NET官网地址:https://www.quartz-scheduler.net/ Quartz.NET文档地址:ht ...
- windows环境下 快速杀死占用端口的进程
保存为bat脚本,设置需要解除占用的端口 port,点击运行即可 @echo off setlocal enabledelayedexpansion set prot = 8022 for /f &q ...
- IOC实现-Unity
.NET中实现IOC有很多方式,比如:Unity.Ninject.Autofac.MEFNinject的实现参考<Pro ASP.NET MVC3.5 FrameWork>下面给出的是Un ...
- Kong命令(二)service
service介绍: service 是声明了一组name.host.port.protocol等配置的函数.可以绑定route.upstream上下游服务.并且对于route.upstream可以绑 ...
- Go 标准库,常用的包及功能
Go 的标准库 Go语言的标准库覆盖网络.系统.加密.编码.图形等各个方面,可以直接使用标准库的 http 包进行 HTTP 协议的收发处理:网络库基于高性能的操作系统通信模型(Linux 的 epo ...