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 ...
随机推荐
- springmvc的执行流程详解
1.什么是MVC MVC是Model View Controller的缩写,它是一个设计模式 2.springmvc执行流程详细介绍 第一步:发起请求到前端控制器(DispatcherServlet) ...
- IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战
Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...
- Vue.prototype的用法
基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...
- ES6详解八:模块(Module)!--各种导入导出方法
[-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结 modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...
- Ruby 遍历多个数组
puts("----------------------------------------") puts(" 多重指定 test") ...
- 湖南集训day5
难度:☆☆☆☆☆☆☆ /* 二分答案 算斜率算截距巴拉巴拉很好推的公式 貌似没这么麻烦我太弱了...... 唉不重要... */ #include<iostream> #include&l ...
- markdownpad2下载安装教程
1.下载安装 http://markdownpad.com/download/markdownpad2-setup.exe 直接下载,安装过程中提醒要安装微软的一个什么环境,不用理会直接跳过,实测没有 ...
- 慕课网6-2 作业:js实现轮播特效
小伙伴们,掌握了JavaScript的语法.流程控制语句.内置对象以及DOM和BOM的知识,运用所学知识完成如下图所示的交互效果——轮播图.效果图如下: 具体交互效果图参考gif动态效果图,gif效果 ...
- $P2299 Mzc和体委的争夺战$
\(problem\) #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; typedef long lon ...
- 51nod1446 Kirchhoff矩阵+Gauss消元+容斥+折半DFS
思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...