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 ...
随机推荐
- 【oracle11g，18】存储结构：暂时表，手工条带化，表/索引迁移表空间，删除表，外部表
一. 暂时表 暂时表放在暂时表空间,不生成redo,仅仅有undo. 在暂时表中能够创建索引.视图及触发器,还能够使用"Export and Import(导出和导入)"或&quo ...
- LeetCode 824. Goat Latin (山羊拉丁文)
题目标签:String 首先把vowel letters 保存入 HashSet. 然后把S 拆分成 各个 word,遍历每一个 word: 当 word 第一个 字母不是 vowel 的时候,把第一 ...
- The Breakpoint will not currently be hit. No executable code associated with this line
首先.请确认solutin的属性 C/C++->General-> Debug Information Format 选择Program Database(/Zi) Linking-> ...
- bzoj4668
并查集+最小生成树 首先我们发现这题可以lct维护最小生成树,但是发现如果生成树在之后是不会修改的,那么就想到了并查集,然后就不知道怎么做了... 其实当我们连接两个连通块的时候,两个连通块只能通过这 ...
- K8S之利用Label控制Pod位置
首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...
- RijndaelManaged 加密
public string Encrypt(string str) { string result = null; if (str == null) { return result; } try { ...
- js 获取URL的值
今天碰到要在一个页面获取另外一个页面url传过来的参数,一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数. 后来想了一下,肯定会有更加简单的方法的!所以在网 ...
- vue-cli 打包优化
1. 优化打包体积 先上2个图 (上图A是优化前的各个js大小对比视图,下图B是优化后,还未完全优化完成的,不过也可以看得出来对比) 图A是3个压缩文件,包括部分图片和使用的所有js,体积都偏大 图B ...
- html5——语义标签
传统布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- CentOS 7 使用 yum 安装 MariaDB 与 MariaDB 的简单配置
闲置已久的空间环境配置忘得差不多了,今天得空整理,重置了磁盘重新搭建环境,首先安装MariaDB的数据库,在这里记录下安装过程,以便以后查看. 1.安装MariaDB 安装命令 yum -y inst ...