如何使用纯CSS3来生成家谱（family tree）

为什么80%的码农都做不了架构师？>>>

日期：2012-7-28 来源：GBin1.com

今天我们将要介绍的是如何在不使用Flash和JavaScript的情况下，用纯CSS来完成一个可组织数据或者家谱。这里使用一个非常简单的标签 - 嵌套列表li。其中伪元素用于绘制之间家庭成员关系，它还具有悬停的效果 - 用在显示整个家族图谱中。 [5月1日，2012年]注：此版本为当前最新版本，并支持IE浏览，如果家族中有更多的成员，也可以轻松的加入。希望大家喜欢这个CSS实现的家族图谱，当然你也可以使用它来生成一个组织结构图

在线演示

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）

转载于:https://my.oschina.net/gbin1/blog/69778

如何使用纯CSS3来生成家谱（family tree）相关推荐

html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装可以 ...
预警展示样式html,纯css3 Tooltip工具提示样式
microtip.css是一款纯css3 Tooltip工具提示样式.microtip.css不用依赖任何js文件,就可以生成时尚的Tooltip效果.它是轻量级的,压缩后的版本小于1kb. 安装可 ...
纯CSS3实现超酷炫的萤火虫动画
银烛秋光冷画屏,轻罗小扇扑流萤.仲夏之夜,花草从间,萤光舞动,构成一幅诗意的画面.如今用HTML5大显身手,可以做很多有意思的应用和游戏.今天我们要分享一个用纯CSS3做一个萤火虫动画的特效. 先来看 ...
css3之谜灯卡片_9种纯CSS3人物信息卡片UI设计效果
插件描述:每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成非常漂亮的鼠标滑过动画特效. 这是一组纯CSS3人物信息卡片UI设计效果.这组人物信息卡片共9种效果,每种效果在鼠标滑过卡 ...
php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

如何使用纯CSS3来生成家谱（family tree）

HTML代码

CSS代码

如何使用纯CSS3来生成家谱（family tree）相关推荐

最新文章

热门文章