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>
【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的更多相关文章
- Android一个炫酷的树状图组织架构图开源控件实现过程
Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...
- SqlServer-无限递归树状图结构设计和查询
在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
- D3树状图给指定特性的边特别显示颜色
D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...
- D3树状图异步按需加载数据
D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
- [整理] ES5 词法约定文档树状图
将ES5 词法说明整理为了树状图,方便查阅,请自行点开小图看大图:
- bzoj 4871: [Shoi2017]摧毁“树状图” [树形DP]
4871: [Shoi2017]摧毁"树状图" 题意:一颗无向树,选两条边不重复的路径,删去选择的点和路径剩下一些cc,求最多cc数. update 5.1 : 刚刚发现bzoj上 ...
- vue 树状图数据的循环 递归循环
在main.js中注册一个子组件 在父组件中引用 树状图的数据格式 绑定一个数据传入子组件,子组件props接收数据 子组件中循环调用组件,就实现了递归循环
- ztree 文件夹类型的 树状图
未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...
随机推荐
- (hzau)华中农业大学第四届程序设计大赛网络同步赛 G: Array C
题目链接:http://acm.hzau.edu.cn/problem.php?id=18 题意是给你两个长度为n的数组,a数组相当于1到n的物品的数量,b数组相当于物品价值,而真正的价值表示是b[i ...
- Dynamically loading an external JavaScript or CSS file
原文: Dynamically loading an external JavaScript or CSS file 通过javascript动态加载css文件和javascript文件,主要是通 ...
- SQLServer2008设置开启INTERNET远程连接
SQL Server 2008默认是不允许远程连接的,sa帐户默认禁用的,如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,需要做两个部分的配置: 使用sa账户登录SQL Se ...
- 表单校验之datatype
凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...
- cocos2d 制作动态光晕效果基础 —— blendFunc
转自:http://blog.csdn.net/yang3wei/article/details/7795764 最近的项目要求动态光晕的效果. 何谓动态光晕?之前不知道别人怎么称呼这个效果, 不过在 ...
- IOS Note - View Controller(视图控制器)
Application Delegate(应用程序委托) Application Name: SingleView SingleViewAppDelegate.h #import <UIKit/ ...
- C++ BackColor_Dialog
相关主题 1. 用纯色 设置对话对话框的背景色 2. 用位图 设置对话对话框的背景色 3. 使用Picture Ctrl来设置背景图片 对话框背景色 其他相关 CColorDi ...
- replace和insert的语句插入(转)
SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...
- ABAP屏幕基础
Select语句的使用 关键字into后可以加 structure(结构体), internal table(内表) 和 fieldlist(字段列表) Authority 权限 程序员可以根据权限对 ...
- inline(内联元素)和block(块级元素) 的区别
块级元素,默认是独自占据一行的.比如是<p>.<h1>.<h2>.<h3>.<h4>.<h5>.<h6>.<u ...