日期: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)
分享到:
相关推荐
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。
纯css3制作Word文本编辑器效果 纯css3制作Word文本编辑器效果
使用纯 CSS 设计3D按钮使用纯 CSS 设计3D按钮
纯CSS3按钮3D效果,在鼠标点击按钮时,按钮会有下凹的视觉效果,非常好看。
CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。
两款纯css3实现的动画菜单
纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效
当然,他并不是纯css3的,抱歉标题可能会有些歧义,但是偶尔的一点点js也是可以忽略的啦 附件提供了28个不同的加载效果,你可以任选一种作为你的手机网页端部分模块的loading效果,而不需要考虑兼容性的问题 ...
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...
使用纯CSS3实现图片轮播效果源码免费下载 使用纯CSS3实现图片轮播效果源码免费下载
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
纯CSS3实现超级炫酷3D效果源码下载 纯CSS3实现超级炫酷3D效果源码下载
球形多图3d旋转,纯css3代码
纯CSS3实现简易3D按钮是一款相对简易的纯CSS3 3D按钮,可以自己配置背景颜色。
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构思新颖,效果非常的酷。
css菜单生成器css菜单生成器css菜单生成器
纯CSS3 Bootstrap步骤箭头按钮样式 纯CSS3 Bootstrap步骤箭头按钮样式
CSS特效代码生成器CSS特效代码生成器CSS特效代码生成器
纯css3简单的星星打分特效 纯css3简单的星星打分特效
这是一款使用css伪元素制作的纯css3按钮样式。该款按钮样式共有5种效果,后面4种有3d立体效果。该css3按钮样式是网页设计不可多得的素材。