本帖子已过去太久远了，不再提供回复功能。css 纯CSS实现家谱树（组织架构树同理） - 为程序员服务
为程序员服务
纯CSS实现家谱树（组织架构树同理）
原代码出处：
/walkthrough/css3-family-tree
实现的原理很简单：
1、使用 ul、li 元素构建数据源。
2、使用css中的 :before、:after 两个伪类的content属性来构建连接线（本质是 content 的 border）。
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&Test&/title&
&style class=&csscreations&&
/*Now the CSS*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20 position:
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.tree li {
float: text-align:
list-style-type:
padding: 20px 5px 0 5
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: top: 0; right: 50%;
border-top: 1px solid #
width: 50%; height: 20
.tree li::after{
right: left: 50%;
border-left: 1px solid #
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: top: 0; left: 50%;
border-left: 1px solid #
width: 0; height: 20
.tree li a{
border: 1px solid #
padding: 5px 10
text-decoration:
color: #666;
font-family: arial, verdana,
font-size: 11
display: inline-
border-radius: 5
-webkit-border-radius: 5
-moz-border-radius: 5
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
/*Connector styles on hover*/
.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:
/*Thats all. I hope you enjoyed it.
Thanks :)*/
We will create a family tree using just CSS(3)
The markup will be simple nested lists
&div class=&tree&&
&a href=&#&&Parent&/a&
&a href=&#&&Child&/a&
&a href=&#&&Grand Child&/a&
&a href=&#&&Child&/a&
&li&&a href=&#&&Grand Child&/a&&/li&
&a href=&#&&Grand Child&/a&
&a href=&#&&Great Grand Child&/a&
&a href=&#&&Great Grand Child&/a&
&a href=&#&&Great Grand Child&/a&
&li&&a href=&#&&Grand Child&/a&&/li&
//该片段来自于
您可能的代码
相关聚客文章
荣誉：1317
相关专栏文章君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
CSS入门-XHTML文档结构树
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口热门关键字：
网友杰立分享纯css实现树型结构网站地图特效
网友杰立分享纯css实现树型结构网站地图特效
所属分类：
发布时间： 18:51:45
下载量：878
转载请自觉注明原文：
这个也算得上是网站上一款非常逆天的作品，没有任何或者脚本参考，纯css样式代码实现，兼容所有浏览器，也是从事工作的把收藏已久的作品整理出来分享的，非常实用，使用非常简单，既可当使用，也可以当树型菜单使用，太棒了。。。
核心css样式代码如下：
{ border: 0; border-left: 1px solid #BBBBBB; }
.nav ul li li {color: #000; background:
url("../images/line.gif") left center no-}
.nav ul ul ul {border-left: 1px solid #BBBBBB; }
.nav ul li .sub-sub {background:
url("../images/line.gif") top left no-}
.nav a, .nav a:visited {color: #4F4F4F;}
.nav a:active, .nav a:hover, .nav a:focus,
a:focus .sffocus
{color: #000;}
.nav ul ul a, .nav ul ul a:visited
{color: #4F4F4F;}
.nav ul ul a:active, .nav ul ul a:hover, .nav ul ul a:focus {color: #000;}
/* inner box styling */
/* Level 1 */
.nav ul li .ro {display: width: 100%; background: url("../images/ro-01.gif") top right no-}
.nav ul li .lo {display: width: 100%; background: url("../images/lo-01.gif") top left no-}
.nav ul li .ru {display: width: 100%; background: url("../images/ru-01.gif") bottom right no-}
.nav ul li .lu {display: width: 100%; background: url("../images/lu-01.gif") bottom left no-}
.nav ul li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1 }
/* Level 2 + 3 */
.nav ul li li .ro {background: url("../images/ro-02.gif") top right no-}
.nav ul li li .lo {background: url("../images/lo-02.gif") top left no-}
.nav ul li li .ru {background: url("../images/ru-02.gif") bottom right no-}
.nav ul li li .lu {background: url("../images/lu-02.gif") bottom left no-}
.nav ul li li .box-content {width: 100%; padding: 0.1em 0.1em 0.1em 0.1 }
/* Level 1 - 3 hover */
.nav ul li a:hover .ro {background: url("../images/ro_h.gif") top right no-}
.nav ul li a:hover .lo {background: url("../images/lo_h.gif") top left no-}
.nav ul li a:hover .ru {background: url("../images/ru_h.gif") bottom right no-}
.nav ul li a:hover .lu {background: url("../images/lu_h.gif") bottom left no-}
效果如下：
如果您觉得本作品对您的学习有所帮助：
如果你喜欢学院的资源就下载吧，亲，谢谢！
提示：如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !
声明: 本站内容均为网友原创或整理于互联网，版权归作品最初创作人，转载请注明（出处）原文链接，转载前请邮件至磐，一旦发现造成侵权行为，后果自负。。
相关插件：做移动端有一段时间，今天有同事问了我 article 和 section 标签的使用，模模糊糊的解释了下，他似懂非懂，有点小尴尬。忽然间觉得自己有必要再翻翻书籍，重温下 html5 的新元素。html5 新增的结构元素，有的经常使用到，有的用不上，当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响页面的最终展现，不管是 article 还是 section 能用就好了。如果考虑实际项目针对用户，我也是这么认为的，但作为一个重构仔，我们需要让标签语义化，清晰的结构，更好的 seo，利于特殊终端的阅读(无障碍)，此时 html5 标签的作用就很明显了，并不是说能用就好。于是复习下内容并记录在博客上，顺便分享给大家，也方便自己以后查找。
HTML5 新增结构元素分为主体结构元素和非主体结构元素
主体结构元素： article、section、nav、aside、time
非主体结构元素：header、hgroup、footer、address
一、主体结构元素
article 标签，从语义化上看为文档、页面，其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题，并放在 header 标签中
article 元素可以互相嵌套
使用频率极高，强调独立性，多注意下与 header 标签的使用。
&h1&是我标签&/h1&
&p&我是段落&/p&
&div&我的内容&/div&
&/article&
&/article&
section&标签，从语义化上看为部分，其用法如下：
用于页面内容的独立分块，往往是文章的一段
通常由内容和标题组成，没有标题的内容不推荐使用 section
使用频率低，强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。
&h1&水果&/h1&
&h2&苹果&/h2&
&div&苹果是撒？&/div&
&/article&
&h2&桔子&/h2&
&div&桔子是撒？&/div&
&/article&
&/section&
&!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --&
&h1&中国人物&/h1&
&p&三国、两晋、南北朝&/p&
&h2&三国&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&
&h2&两晋&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&
&/article&
nav&标签，从语义化上看为导航，其用法如下：
通常作为页面导航的链接组
侧边栏导航
使用频率高。
&li&&a href=""&菜单1&/a&&/li&
&li&&a href=""&菜单2&/a&&/li&
&li&&a href=""&菜单3&/a&&/li&
aside 标签，从语义化上看为在旁边、侧边，其用法如下：
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
&!-- 在article标签外使用时 --&
&h1&马云是谁&/h1&
&p&马云，男，日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........&/p&
&h1&参考资料&/h1&
&p&百度网、维基百科...&/p&
&/article&
&!-- 在article标签内使用时 --&
&li&&a href=""&老赵的博客&/a&&/li&
&li&&a href=""&鬼哥的博客&/a&&/li&
&li&&a href=""&彪叔的博客&/a&&/li&
time 标签，从语义化上看为时间，其用法如下：
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
&time datetime=""&日&/time&
&!-- datetime 属性中日期与时间之间要用"T" 分隔，"T'表示时间 --&
&time datetime="T20:00"&日20:00&/time&
&!-- 时间加上"Z"表示给机器编码时使用 UTC 标准时间 --&
&time datetime="T20:00Z"&日20:00&/time&
二、非主体结构元素
header 标签，从语义化上看为文档的页眉，其用法如下：
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高，比较容易理解。
&h1&我是大头&/h1&
&h1&我是脖子&/h1&
&p&我是身体&/p&
&/article&
hgroup&标签，从语义化上看为标题组，其用法如下：
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
&h1&我是刘备&/h1&
&h2&我是关羽&/h2&
&h3&我是张飞&/h3&
&/hgrounp&
&p&吕布惊呆了&/p&
&/article&
footer 标签，从语义化上看为文档的脚注，其用法如下：
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高，比较容易理解。
&p&吕布惊呆了&/p&
&li&关于三国&/li&
&li&地图信息&/li&
&li&游戏攻略&/li&
&/article&
address&标签，从语义化上看为地址，其用法如下：
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
&a href=""&作者：张三丰&/a&
&a href=""&地址：武当山&/a&
&a href=""&联系方式：1247&/a&
&/address&
&感谢webapp群的猎巫同学提醒，这个属性其实HTML 4.01就已经有了，这里修正下。
希望本文对大家在 html5 结构标签上的运用有一定的指导，如果发现内容有错误的地方，欢迎大家指正~
参考资料《HTML5与CSS3权威指南》
阅读(...) 评论()
朋友同事同行