div+css 组织结构
<!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 组织结构的更多相关文章
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
随机推荐
- 5.Swift教程翻译系列——Swift字符串和字符
英文版PDF下载地址http://download.csdn.net/detail/tsingheng/7480427 字符串是一组字符的有序序列,比方"hello,china"或 ...
- Levenberg–Marquardt algorithm
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFubWVuZ3dlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 洛谷P1193 洛谷团队训练VS传统团队训练
题目背景 "在中学的信息学教育领域,洛谷无疑是一个相当受欢迎的辅助网站.同时有百余所学校正在通过洛谷进行信息学竞赛(以后简称OI)的教育.洛谷之所以如此受欢迎,是因为洛谷创新的将OI教育的几 ...
- MVVMLight消息通知实现机制详解（二）
接上文 MVVMLight消息通知实现机制详解(一) 该工具的内部主要逻辑是以字典模式进行储存持有订阅对象设置的传入参数Type类型.Key值.Action.Target(订阅对象本身) 在发生订阅事 ...
- Mysql中date,time,datetime,timestamp的区别
区别: timestamp:时间戳.北京时间1970年01月01日08时00分00秒 起至现在的总秒数. datetime:带时分秒的完整时间,例如:1970-01-01 10:00:00 date: ...
- [App Store Connect帮助]三、管理 App 和版本（2.2）输入 App 信息：设置 App 分级
您必须设置 App 分级,这是一项平台版本信息属性,用于在 App Store 上实施家长控制.App Store Connect 提供了一份内容描述列表,通过该列表,您可以确定相应内容在您 App ...
- c# regex Match Matches MatchCollection 用法
string text = "1A 2B 3C 4D 5E 6F 7G 8H 9I 10J 11Q 12J 13K 14L 15M 16N ffee80 #800080"; Reg ...
- Coursera公开课-Machine_learing：编程作业2
第三周编程作业:Logistic Regression 代码包在gitlab上:https://gitlab.com/luntai/Machine_Learning
- Elasticsearch之Hadoop插件的安装（图文详解）
这个Hadoop插件的安装是非常重要. Hadoop插件安装 在es的安装目录下 bin/plugin install elasticsearch/elasticsearch-repository-h ...
- C#学习-处理Excel
首先先了解下一个Excel文件的组成 1.一个Excel包含多个工作表(Sheet) 2.一个工作表(Sheet)包含多行(Row) 3.一行(Row)包含多个单元格(Cell) 如何判断一个单元 ...