<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>家谱树状代码 demo by js.alixixi.com</title>
<style class="csscreations">
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

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: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width:50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}

/*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{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
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: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}

.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

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: #94a0b4;
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/
</style>
</head>
<body>
<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
<ul>
<li>
<a href="#">父亲</a>

<ul>
<li>
<a href="#">孩子1</a>
<ul>
<li>
<a href="#">孙子</a>
</li>
</ul>
</li>
<li>
<a href="#">孩子2</a>
<ul>
<li><a href="#">孙子1</a></li>
<li>
<a href="#">孙子2</a>
<ul>
<li>
<a href="#">曾孙1</a>
</li>
<li>
<a href="#">曾孙2</a>
</li>
<li>
<a href="#">曾孙3</a>
</li>
<li>
<a href="#">曾孙4</a>
</li>
<li>
<a href="#">曾孙5</a>
</li>
<li>
<a href="#">曾孙6</a>
</li>
</ul>
</li>
<li><a href="#">孙子3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

div+css 组织结构的更多相关文章

  1. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  2. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  6. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  7. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

随机推荐

  1. 辛星浅谈mysql中的数据碎片以及引擎为MyISAM下的操作

    对于mysql中的数据碎片,事实上和我们删除数据是息息相关的,删除数据的时候必定会在数据文件里造成不连续的空白空间,对于少量的数据的删除,并不会产生多少的空白空间.假设在一段时间内的大量的删除操作,会 ...

  2. Redis 持久化，写入磁盘的方式

    如果帮到了您,可以支持一下,谢谢您的支持! Redis是一个支持持久化的内存数据库=>也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化. redis支持四种持久化方式, 一是 Sn ...

  3. C/C++ 答疑解问

    1. sizeof(string)的大小 string属于类,类的大小就是类中成员变量(非静态)加上指向虚函数表的指针以及指向虚基类表的指针加起来的和.因为string是一个模板类,受具体的实现来决定 ...

  4. Bootloader - main system - Recovery的三角关系【转】

    本文转载自:http://blog.csdn.net/u012719256/article/details/52304273 一.MTD分区: BOOT:        boot.img,Linux ...

  5. 洛谷P1330 封锁阳光大学(二分图染色)

    P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...

  6. [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. Django day30 自定义配置settings文件，分页器，版本控制

    一:自定义配置settings文件 1.有两套配置文件,默认配置,用户的配置 2.如果某个字段,用户配置了,就用用户的,如果没配置,就用默认的 二:分页器 1.三种分页: # 普通分页 from re ...

  8. knockjs

    用VS2012建立Web站点有个新惊喜,默认加了KnockoutJS这个Javascript的MVVM模式的实现库,方便Web前端的开发 官方站点 √主页:  http://www.knockoutj ...

  9. MFC学习篇（二）：error LNK2005 及其解决方法

    环境:MFC条件下添加原有代码 >nafxcwd.lib(afxmem.obj) : error LNK2005: @YAPAXI@Z) already defined in LIBCMTD.l ...

  10. BZOJ 4867 分块+神tm卡常

    思路: 注意到len<=10 按照权值max-min<=sqrt(n)*len 分块 记一下前缀和  每修改sqrt(n)次以后重新分块   修改的时候整块打标记  两边重构 (这题常数卡 ...