html组织结构图 源码,css绘制组织结构图
【实例简介】
【实例截图】
【核心代码】
css绘制结构图
* {margin: 0; padding: 0;}
.tree{width:760px; margin:40px auto 0 auto}
.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;
}
教程:css绘制结构图
Parent
Child
- Grand Child
Child
- Grand Child
Grand Child
- Great Grand Child
- Great Grand Child
- Great Grand Child
- Grand Child
html组织结构图 源码,css绘制组织结构图相关推荐
- Font Awesome html源码,CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 部分图标: 其他效果图: 调用实例: Font Awesome图标调用实例 N ...
- 网站维护404页面带音乐源码CSS本地化
介绍: 可以用来当网站维护界面 404页面 502页面 都可以 源码简单CSS本地化 不是网上泛滥的版本 已经修复 网盘下载地址: http://kekewl.org/evdg1g1TT310 图片:
- calender 源码 CSS+JS
篇幅有限 就不放demo了,直接上源码,因为可能有需要修改样式或参考源码的,所以并非压缩后的代码 demo详情:calender demo+使用实例 css部分 /*** Zabuto Calend ...
- c语言 opengl画仪表盘源码,opengl绘制五星红旗
本文实例为大家共享了opengl绘制五星红旗的详细代码,供大家参考,详细内容如下 主要仪器设备 VisualStudio C++2015 Windows 10环境 opengl库 操作步骤 1.五星红 ...
- html5旋转相册源码,css实现旋转相册代码
html cssdiv { width:200px; height:400px; position:relative; margin:500px auto; } div img { width:200 ...
- 阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)
theme: smartblue 本文介绍 点赞就等于学会了! 如果本文对您有帮助,建议点赞收藏(点赞就等于学会了) Skeleton 源码一共只有 419 行(加上注释和换行),非常适合用来学习. ...
- iOS高仿微信完整源码,网易爱玩APP源码等
iOS精选源码 iOS一种弹出视图效果带动画 一个快速便捷.无侵入.可扩展的动画弹框库 高仿Elk - 旅行货币转换器 iOS内分享的界面.功能一体化解决方案 使用Olami sdk实现一个语音查询股 ...
- HTML爱心照片墙源码
HTML爱心照片墙源码 css @charset "utf-8"; * {padding: 0;margin: 0; } div {font-family: "微软雅黑& ...
- html汽车跑动特效,纯CSS3实现汽车行驶动画 特效源码!
效果图 各位朋友大家好! 今天给大家带来的是 纯CSS3实现汽车行驶动画 看完效果图以后 是不是很炫酷! 想要文件版源码的,请加穷522323792 废话不多说,上源码 CSS: body{ marg ...
最新文章
- 《Beginning Linux Programming》读书笔记(二)
- 如何确定SharePoint 2007的一次增量爬网会处理多少条更新呢?
- 一次分表踩坑实践的探讨
- LeetCode Add Strings(大整数加法)
- 轻松实现远程批量拷贝文件脚本(女学生作品)
- nginx 如何调用php文件,nginx php-fpm问题无法调用文件夹中的其他php文件
- P1056 排座椅(模拟)
- linux+路由器信号检测工具,Linux下常用网络故障调试工具介绍之Ping命令使用
- python-描述符的操作
- 阿里人告诉你毕业3年,为何技术能力相差越来越大?
- 50台电脑文件服务器,50台电脑云桌面用什么服务器
- wordpress themeforest
- PTA题目 : 用指针实现将一个3*3的整型矩阵转置
- 关于声音的前后左右上下的控制以及单声道立体声的区别
- Spark项目模拟——航班飞行网图分析
- kodexplorer可道云插件之控制台
- 数据治理:数据质量管理策略!
- Docker从入门到放弃
- 使用 OpenCV-Python 识别答题卡判卷
- 华为OD机试真题 Python 实现【异常的打卡记录】【2022.11 Q4 新题】