如何使用纯CSS3来生成家谱(family tree)
2012-07-30 10:56
274 查看
日期:2012-7-28 来源:GBin1.com
今天我们将要介绍的是如何在不使用Flash和JavaScript的情况下,用纯CSS来完成一个可组织数据或者家谱。这里使用一个非常简单的标签 - 嵌套列表li。 其中伪元素用于绘制之间家庭成员关系,它还具有悬停的效果
- 用在显示整个家族图谱中。 [5月1日,2012年]注:此版本为当前最新版本,并支持IE浏览,如果家族中有更多的成员,也可以轻松的加入。希望大家喜欢这个CSS实现的家族图谱,当然你也可以使用它来生成一个组织结构图
![](http://www.gbin1.com/technology/css/20120728-css3-familytree/1.jpg)
在线演示
HTML代码
来源:如何使用纯CSS3来生成家谱(family tree)
今天我们将要介绍的是如何在不使用Flash和JavaScript的情况下,用纯CSS来完成一个可组织数据或者家谱。这里使用一个非常简单的标签 - 嵌套列表li。 其中伪元素用于绘制之间家庭成员关系,它还具有悬停的效果
- 用在显示整个家族图谱中。 [5月1日,2012年]注:此版本为当前最新版本,并支持IE浏览,如果家族中有更多的成员,也可以轻松的加入。希望大家喜欢这个CSS实现的家族图谱,当然你也可以使用它来生成一个组织结构图
![](http://www.gbin1.com/technology/css/20120728-css3-familytree/1.jpg)
在线演示
HTML代码
<!-- We will create a family tree using just CSS(3) The markup will be simple nested lists --> <div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li> <a href="#">Grand Child</a> </li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul> </div>
CSS代码
...........来源:如何使用纯CSS3来生成家谱(family tree)
相关文章推荐
- 如何使用纯CSS3来生成家谱(family tree)
- 如何使用纯CSS3来生成家谱(family tree)
- 如何使用 CoCreateGUID API 生成与 VB 6 的 GUID
- 如何把rtl8188EUS驱动编译生成ko模块并且下载到rk平台Android4.2.2上使用
- 添加一个文件夹及一些文件如何使用git生成patch
- 如何 在 .net 下使用 zint 生成条形码
- 如何使用modelsim-altera 生成Fsdb
- Keil 下生成LIB库文件以及如何使用LIB库文件
- 如何高效地使用XCodeFactory自动生成的数据层代码(一)
- (二)yii使用原生html不使用yii生成html表单如何忽略m层验证无法通过
- 如何使用curl进行验证码生成和验证
- Linux Unicode 编程--C语言如何使用/生成UTF-8编码格式的文件
- 源文件与模块生成时的文件不同,是否希望调试器使用它?如何解决
- 如何使用fastJson来解析JSON格式数据和生成JSON格式数据
- 如何使用PHP动态生成饼状图、柱状图和折线图
- 黄聪:如何使用CodeSmith批量生成代码(原创系列教程)
- 如何使用命令行生成高强度密码
- 如何使用命令行生成高强度密码
- Linux的Terminal中如何生成动态库以及如何使用动态库
- 学习如何使用Mybatis-generator 自动生成java代码以及Mapper文件