直接上图(原网址),还有步骤想详解视频。自己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的更多相关文章

  1. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  2. SqlServer-无限递归树状图结构设计和查询

    在现实生活中,公司的部门设计会涉及到很多子部门,然后子部门下面又存在子部门,形成类似判断的树状结构,比如说评论楼中楼的评论树状图,职位管理的树状图结构等等,实现类似的树状图数据结构是在开发中经常出现的 ...

  3. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

  4. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  5. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  6. [整理] ES5 词法约定文档树状图

    将ES5 词法说明整理为了树状图,方便查阅,请自行点开小图看大图:

  7. bzoj 4871: [Shoi2017]摧毁“树状图” [树形DP]

    4871: [Shoi2017]摧毁"树状图" 题意:一颗无向树,选两条边不重复的路径,删去选择的点和路径剩下一些cc,求最多cc数. update 5.1 : 刚刚发现bzoj上 ...

  8. vue 树状图数据的循环 递归循环

    在main.js中注册一个子组件 在父组件中引用 树状图的数据格式 绑定一个数据传入子组件,子组件props接收数据 子组件中循环调用组件,就实现了递归循环

  9. ztree 文件夹类型的 树状图

    未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...

随机推荐

  1. 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

    转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

  2. 转载.net泛型理解说明

    net泛型理解 泛型简介: 泛型(Generic Type)是.NET Framework2.0最强大的功能之一.泛型的主要思想是将算法与数据结构完全分离开,使得一次定义的算法能作用于多种数据结构,从 ...

  3. Mysql知识要点总结

    1.安装 要点:记得更改字符集 2.数据类型 常用数据类型:INT VARCHAR BLOG 3.操作数据库 SHOW DATABASES; CREATE DATABASE 名称; DROP DATA ...

  4. ios 调试

    http://www.cnblogs.com/weilaikeji/p/3306597.html http://www.cnblogs.com/Twisted-Fate/p/4760156.html ...

  5. [EntLib]微软企业库5.0 学习之路——第一步、基本入门

    话说在大学的时候帮老师做项目的时候就已经接触过企业库了但是当初一直没明白为什么要用这个,只觉得好麻烦啊,竟然有那么多的乱七八糟的配置(原来我不知道有配置工具可以进行配置,请原谅我的小白). 直到去年在 ...

  6. INV(库存管理)

    物料 PROCEDURE update_item(p_init_msg_list IN VARCHAR2 DEFAULT fnd_api.g_false, x_return_status OUT NO ...

  7. Js面向对象和数据类型内存分配(转)

    一 Js基本数据类型以及内存情况 1 Undefined Undefined类型只有一个值undefined,在使用了声明但未初始化的变量的时候,这个变量值就是undefined 1 var hi; ...

  8. PL/pgSQL学习笔记之一

    开始 资料来源:http://www.postgresql.org/docs/9.1/static/plpgsql-overview.html 39.1 概要: PL/pgSQL是一种可载入的过程语言 ...

  9. StructureMap 学习笔记(1)

    前言 一个偶然的机会接触到了StructureMap,当时客户要求让程序具有较好的测试性,自然而然就想到了IOC 容器. 之后就去Google了一下, 不经意间在StackOverFlow找到一篇帖子 ...

  10. MySQL安装详解(V5.5 For Windows)

    前言 这几年一直在用MySQL,并且是Windows+.Net+MySQL的搭配,用MyISAM引擎支持过单表每天千万以上的数据递增,TB级的数据MySQL游刃有余.最近在做一个较大并发的项目,尝试了 ...