CSS3 垂直树状图——运用 :before 和 :after
CSS3 垂直树状图——运用 :before 和 :after
直接上图(原网址),还有步骤想详解视频。自己CSS3练习demo。
【demo】
【HTML】
<div class="tree"><ul><li><a href="#">parent</a><ul><li><a href="#">child</a><ul><li><a href="#">Grant child</a></li></ul></li><li><a href="#">child</a><ul><li><a href="#">Grant child</a></li><li><a href="#">Grant child</a><ul><li><a href="#">Great Grant child</a></li><li><a href="#">Great Grant child</a></li><li><a href="#">Great Grant child</a></li></ul></li><li><a href="#">Grant child</a></li></ul></li></ul></li></ul> </div>
![](/assets/blank.gif)
【CSS3】
*{
margin:0;
padding:0;
}
.tree ul{
padding-top:20px;
position: relative;
webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition:all .3s;
}
.tree li{
float:left;
list-style: none;
text-align: center;
position: relative;
padding:20px 5px 0 5px;
webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition:all .3s;
}
/*利用::before,::after作分支线*/
.tree li::before,.tree li::after{
content:"";
position: absolute;
top:0;
right:50%;
width:50%;
height:20px;
border-top:1px solid #ccc;
}
.tree li:after{
right:auto;
left:50%;
border-left:1px solid #ccc;
}
.tree li:first-child::before,.tree li:last-child::after{
border:0 none;
}
.tree li:last-child::before{
border-right:1px solid #ccc;
-webkit-border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
.tree li:first-child::after{
-webkit-border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}
/*删除仅只有一个分支的分支线*/
.tree li:only-child::before,.tree li:only-child::after{
border:none;
}
.tree li:only-child{
padding-top:0;
}
/*添加仅只有一个分支的下分支线*/
.tree ul ul::before{
content:"";
position: absolute;
top:0;
left:50%;
border-left:1px solid #ccc;
width:0;
height:20px;
}
.tree a{
display: inline-block;
border:1px solid #ccc;
padding: 5px 10px;
color:#666;
text-decoration: none;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition:all .3s;
}
/*添加选中状态*/
.tree li a:hover,.tree li a:hover+ul li a{
background-color: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
.tree li a:hover+ul li:after,.tree li a:hover+ul li:before,.tree li a:hover+ul::before,.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
CSS3 垂直树状图——运用 :before 和 :after相关推荐
- 聚类树状图_聚集聚类和树状图-解释
聚类树状图 Agglomerative Clustering is a type of hierarchical clustering algorithm. It is an unsupervised ...
- 数据可视化【十一】树状图
Constructing a node-link tree visualization 首先将节点之间的连线画出来. 使用json函数读取文件以后,使用hierarchy等函数得到连线的数组,然后绑定 ...
- bzoj 4871: [Shoi2017]摧毁“树状图”
4871: [Shoi2017]摧毁"树状图" Time Limit: 25 Sec Memory Limit: 512 MB Submit: 53 Solved: 9 [Su ...
- R语言绘制环形树状图
R语言绘制环形树状图 1.主要用到dendextend和circlize包绘图: library(dendextend) library(circlize)# 距离矩阵 d <- dist(US ...
- R语言ggplot2可视化树状图、层次聚类系统树图、树状图根据给定的距离度量将相似点分组在一起、并根据点的相似性将它们组织成树状图链接起来(Hierarchical Dendrogram)
R语言ggplot2可视化树状图.层次聚类系统树图.树状图根据给定的距离度量将相似点分组在一起.并根据点的相似性将它们组织成树状图链接起来(Hierarchical Dendrogram) 目录
- Python使用matplotlib可视化树状图、层次聚类系统树图、树状图根据给定的距离度量将相似点分组在一起、并根据点的相似性将它们组织成树状图链接起来(Dendrogram)
Python使用matplotlib可视化树状图.层次聚类系统树图.树状图根据给定的距离度量将相似点分组在一起.并根据点的相似性将它们组织成树状图链接起来(Dendrogram) 目录
- R语言ggplot2可视化:为层次聚类树状图dendrogram中的簇进行着色、在树状图dendrogram中为不同的层次聚类簇配置不同的色彩
R语言ggplot2可视化:为层次聚类树状图dendrogram中的簇进行着色.在树状图dendrogram中为不同的层次聚类簇配置不同的色彩 #层次聚类树状图dendrogram labs = pa ...
- R语言层次聚类(hierarchical clustering):使用scale函数进行特征缩放、hclust包层次聚类(创建距离矩阵、聚类、绘制树状图dendrogram,在树状图上绘制红色矩形框)
R语言层次聚类(hierarchical clustering):使用scale函数进行特征缩放.hclust包层次聚类(创建距离矩阵.聚类.绘制树状图dendrogram,在树状图上绘制红色矩形框) ...
- windows CMD生成文件夹树状图(tree)命令(以图形显示驱动器或路径的文件夹结构)
如: 步骤: 在当前路径运行CMD: 输入tree: 当然也可以用绝对路径, 以tree \起头: 太多了就不贴上来了. 也可以用相对路径: tree .\test_pipreqs 省略.\也可以: ...
最新文章
- 几种TCP连接中出现RST的情况
- 线程的退出 java_(转)Java结束线程的三种方法
- linux内存分配堆栈数据段代码段,linux – LD_PRELOAD堆栈和数据段内存分配
- faker生成测试数据,一些数据生成方法摘取
- python找数字程序_程序以查找Python中从1到N的所有缺失数字
- 当append遇到make遇到的坑
- 学习之法 —— 概念、名词、术语与定义的学习
- Android内存优化之——static使用篇
- BP神经网络及其app设计
- Tough Days
- manjaro 配置 独立显卡驱动
- phxqueue java_微信开源PhxQueue:高可用、高可靠、高性能的分布式队列的几个问题...
- KNIME + Python = 数据分析+报表全流程
- 如何学习计算机视觉?
- 七彩cms云转码_七彩CMS开源程序-最新云转码全开源 带完整安装搭建教程
- 大治一中2021年高考成绩查询,2021年大冶市高考状元名单资料,今年大冶市高考状元多少分...
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java场地预定平台55nqh
- c语言:求二元一次方程根的所有情况
- 记Android新版本构建导致的问题-android 不能直接引用module资源
- 2023北京理工大学考研介绍