通过HTML / CSS制作组织结构图 [英] Make organization chart by HTML/CSS
本文介绍了通过HTML / CSS制作组织结构图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图修改这个
* {-webkit-box-sizing：border-box; -moz-box-sizing：border-box;盒子尺寸：边框; position：relative;}。cf：before，.cf：after {content：; / * 1 * / display：table; / * 2 * /}。cf：after {clear：both;} / ** *仅适用于IE 6/7 *包含此规则以触发hasLayout并包含浮点数。 * /。cf {* zoom：1;} / *泛型样式* / body {background：＃F5EEC9; } .content {width：100％; max-width：1142px;保证金：0汽车; padding：0 20px;} a：focus {outline：2px dashed＃f7f7f7;} @ media all和（max-width：767px）{.content {padding：0 20px; }} ul {padding：0;保证金：0; list-style：none; } ul a {display：block;背景：#ccc; border：4px solid #fff; text-align：center;溢出：隐藏; font-size：.7em;文字修饰：无; font-weight：bold;颜色：＃333;身高：70px; margin-bottom：-26px; box-shadow：4px 4px 9px -4px rgba（0,0,0,0.4）; -webkit-transition：全部为线性.1s; -moz-transition：全部为线性.1s; transition：all linear .1s;} @ media all和（max-width：767px）{ul a {font-size：1em; }} ul a span {top：50％; margin-top：-0.7em; display：block;} / * * /。administration> li> a {margin-bottom：25px;}。director> li>一个{宽度：50％; margin：0 auto 0px auto;}。subdirector：after {content：;显示：块;宽度：0;身高：130px;背景：红色; border-left：4px solid #fff;左：45.45％; position：relative;}。子目录，.departments {position：absolute; width：100％;}。departments>李：第一个孩子{width：18.59894921190893％;身高：66px; / * margin：0 auto 92px auto; * / padding-top：25px; / * border-bottom：4px纯白色; * / / * z-index：1; * /}。departments>李：第一个孩子{/ * float：left; * /左：27.2％; border-right：4px纯白色; } .departments> li：first-child a {width：100％;} @ media all和（max-width：767px）{.subdirector>李：第一孩子，.departments>李：第一个孩子{宽度：40％; } .subdirector>李：第一个孩子{右：10％; margin-right：2px; } .subdirector：在{left：49.8％; } .departments>李：第一个孩子{左：10％; margin-left：2px; }}。departments> li：first-child a {right：25px;}。department：first-child，.departments li：nth-child（2）{/ * margin-left：0; * / / *清除：离开; * / margin-left：12％}。departments：after {content：;显示：块;位置：绝对;宽度：48.2％;高度：22px; border-top：4px solid #fff; border-right：4px solid #fff; border-left：4px solid #fff;保证金：0汽车;顶部：38px; left：21％} @ media all和（max-width：767px）{.departments：after {border-right：none;左：0;宽度：49.8％; }} @media all和（min-width：768px）{.department：first-child：before，.department：last-child：before {border：none; }}。department：before {content：;显示：块;位置：绝对;宽度：0;高度：22px; border-left：4px纯白色; z-index：1;顶部：-22px;剩下：50％; margin-left：-4px;}。department {border-left：4px solid #fff;宽度：18.59894921190893％;向左飘浮;余量：5.751313485113835％; margin-bottom：60px;}。lt-ie8 .department {width：18.25％;} @ media all and（max-width：767px）{.department {float：none;宽度：100％; margin-left：0; } .department：before {content：;显示：块;位置：绝对;宽度：0;身高：60px; border-left：4px纯白色; z-index：1;顶部：-60px;剩下：0％; margin-left：-4px; } .department：n-child（2）：before {display：none; }}。department> a {margin：0 0 -26px -4px; z-index：1;}。department> a：hover {height：80px;}。department> ul {margin-top：0px; margin-bottom：0px;}。部门li {padding-left：25px; border-bottom：4px solid #fff; height：80px; } .department li a {background：#fff;顶部：48px;位置：绝对; z-index：1;宽度：90％;身高：60px; vertical-align：middle; right：-1px;背景图像：URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI + CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8 + CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4 =）; background-image：-moz-linear-gradient（-45deg，rgba（0,0,0,0.25）0％，rgba（0,0,0,0）100％）！important; background-image：-webkit-gradient（线性，左上，右下，停止颜色（0％，rgba（0,0,0,0.25）），停止颜色（100％，rgba（0,0,0） ，0）））重要！; background-image：-webkit-linear-gradient（-45deg，rgba（0,0,0,0.25）0％，rgba（0,0,0,0）100％）！important; background-image：-o-linear-gradient（-45deg，rgba（0,0,0,0.25）0％，rgba（0,0,0,0）100％）！important; background-image：-ms-linear-gradient（-45deg，rgba（0,0,0,0.25）0％，rgba（0,0,0,0）100％）！important;背景图像：线性梯度（135deg，rgba（0,0,0,0.25）0％，rgba（0,0,0,0）100％）！ filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃40000000'，endColorstr ='＃00000000'，GradientType = 1）;}。 0,0,0.1）; height：80px;宽度：95％;顶部：39px; background-image：none！important;} / *部门/部分的颜色* /。director a {background：＃5b9bd5; } .department.dep-b a {background：＃ed7d31; } .department.dep -c a {background：＃70ad47; } .department.dep -d a {background：＃ffc000; }
< div class =content> < h1>响应式组织结构图< / h1> < figure class =org-chart cf> < ul class =administration> <李> < ul class =director> <李> < a href =＃>< span>导演< / span>< / a> < ul class =departments cf> <李>< /锂> < li class =department dep-b> < a href =＃>< span>部门B< / span>< / a> < ul class =sections> < li class =section>< a href =＃>< span> B1部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> B2部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> B3部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> B4部分< / span>< / a>< / li> < / UL> < /锂> < li class =department dep-c> < a href =＃>< span>部门C< / span>< / a> < ul class =sections> < li class =section>< a href =＃>< span> Section C1< / span>< / a>< / li> < li class =section>< a href =＃>< span>第C2节< / span>< / a>< / li> < li class =section>< a href =＃>< span>第C3节< / span>< / a>< / li> < li class =section>< a href =＃>< span>第C4节< / span>< / a>< / li> < / UL> < /锂> < li class =department dep-d> < a href =＃>< span>部门D< / span>< / a> < ul class =sections> < li class =section>< a href =＃>< span> D1部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> D2部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> Section D3< / span>< / a>< / li> < li class =section>< a href =＃>< span> D4部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> D5部分< / span>< / a>< / li> < li class =section>< a href =＃>< span> D6部分< / span>< / a>< / li> < / UL> < /锂> < / UL> < /锂> < / UL> < /锂> < / UL> < / figure>< / div>
I'm trying to modify the code from this demo in codepen
I'd like to make it look like the chart below, but don't know how to customize it:
Here's a snippet with the original code - any suggestions welcome.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* Generic styling */
body {
background: #F5EEC9;
}
.content {
width: 100%;
max-width: 1142px;
margin: 0 auto;
padding: 0 20px;
}
a:focus {
outline: 2px dashed #f7f7f7;
}
@media all and (max-width: 767px) {
.content {
padding: 0 20px;
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul a {
display: block;
background: #ccc;
border: 4px solid #fff;
text-align: center;
overflow: hidden;
font-size: .7em;
text-decoration: none;
font-weight: bold;
color: #333;
height: 70px;
margin-bottom: -26px;
box-shadow: 4px 4px 9px -4px rgba(0, 0, 0, 0.4);
-webkit-transition: all linear .1s;
-moz-transition: all linear .1s;
transition: all linear .1s;
}
@media all and (max-width: 767px) {
ul a {
font-size: 1em;
}
}
ul a span {
top: 50%;
margin-top: -0.7em;
display: block;
}
/*
*/
.administration>li>a {
margin-bottom: 25px;
}
.director>li>a {
width: 50%;
margin: 0 auto 0px auto;
}
.subdirector:after {
content: "";
display: block;
width: 0;
height: 130px;
background: red;
border-left: 4px solid #fff;
left: 45.45%;
position: relative;
}
.subdirector,
.departments {
position: absolute;
width: 100%;
}
.subdirector>li:first-child,
.departments>li:first-child {
width: 18.59894921190893%;
height: 64px;
margin: 0 auto 92px auto;
padding-top: 25px;
border-bottom: 4px solid white;
z-index: 1;
}
.subdirector>li:first-child {
float: right;
right: 27.2%;
border-left: 4px solid white;
}
.departments>li:first-child {
float: left;
left: 27.2%;
border-right: 4px solid white;
}
.subdirector>li:first-child a,
.departments>li:first-child a {
width: 100%;
}
.subdirector>li:first-child a {
left: 25px;
}
@media all and (max-width: 767px) {
.subdirector>li:first-child,
.departments>li:first-child {
width: 40%;
}
.subdirector>li:first-child {
right: 10%;
margin-right: 2px;
}
.subdirector:after {
left: 49.8%;
}
.departments>li:first-child {
left: 10%;
margin-left: 2px;
}
}
.departments>li:first-child a {
right: 25px;
}
.department:first-child,
.departments li:nth-child(2) {
margin-left: 0;
clear: left;
}
.departments:after {
content: "";
display: block;
position: absolute;
width: 81.1%;
height: 22px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
border-left: 4px solid #fff;
margin: 0 auto;
top: 130px;
left: 9.1%
}
@media all and (max-width: 767px) {
.departments:after {
border-right: none;
left: 0;
width: 49.8%;
}
}
@media all and (min-width: 768px) {
.department:first-child:before,
.department:last-child:before {
border: none;
}
}
.department:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 22px;
border-left: 4px solid white;
z-index: 1;
top: -22px;
left: 50%;
margin-left: -4px;
}
.department {
border-left: 4px solid #fff;
width: 18.59894921190893%;
float: left;
margin-left: 1.751313485113835%;
margin-bottom: 60px;
}
.lt-ie8 .department {
width: 18.25%;
}
@media all and (max-width: 767px) {
.department {
float: none;
width: 100%;
margin-left: 0;
}
.department:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 60px;
border-left: 4px solid white;
z-index: 1;
top: -60px;
left: 0%;
margin-left: -4px;
}
.department:nth-child(2):before {
display: none;
}
}
.department>a {
margin: 0 0 -26px -4px;
z-index: 1;
}
.department>a:hover {
height: 80px;
}
.department>ul {
margin-top: 0px;
margin-bottom: 0px;
}
.department li {
padding-left: 25px;
border-bottom: 4px solid #fff;
height: 80px;
}
.department li a {
background: #fff;
top: 48px;
position: absolute;
z-index: 1;
width: 90%;
height: 60px;
vertical-align: middle;
right: -1px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%) !important;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0)))!important;
background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)!important;
background-image: -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)!important;
background-image: -ms-linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)!important;
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000', GradientType=1);
}
.department li a:hover {
box-shadow: 8px 8px 9px -4px rgba(0, 0, 0, 0.1);
height: 80px;
width: 95%;
top: 39px;
background-image: none!important;
}
/* Department/ section colors */
.department.dep-a a {
background: #FFD600;
}
.department.dep-b a {
background: #AAD4E7;
}
.department.dep-c a {
background: #FDB0FD;
}
.department.dep-d a {
background: #A3A2A2;
}
.department.dep-e a {
background: #f0f0f0;
}
<div class="content">
<h1>Responsive Organization Chart</h1>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a href="#"><span>Director</span></a>
<ul class="subdirector">
<li><a href="#"><span>Assistante Director</span></a></li>
</ul>
<ul class="departments cf">
<li><a href="#"><span>Administration</span></a></li>
<li class="department dep-a">
<a href="#"><span>Department A</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section A1</span></a></li>
<li class="section"><a href="#"><span>Section A2</span></a></li>
<li class="section"><a href="#"><span>Section A3</span></a></li>
<li class="section"><a href="#"><span>Section A4</span></a></li>
<li class="section"><a href="#"><span>Section A5</span></a></li>
</ul>
</li>
<li class="department dep-b">
<a href="#"><span>Department B</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section B1</span></a></li>
<li class="section"><a href="#"><span>Section B2</span></a></li>
<li class="section"><a href="#"><span>Section B3</span></a></li>
<li class="section"><a href="#"><span>Section B4</span></a></li>
</ul>
</li>
<li class="department dep-c">
<a href="#"><span>Department C</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section C1</span></a></li>
<li class="section"><a href="#"><span>Section C2</span></a></li>
<li class="section"><a href="#"><span>Section C3</span></a></li>
<li class="section"><a href="#"><span>Section C4</span></a></li>
</ul>
</li>
<li class="department dep-d">
<a href="#"><span>Department D</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section D1</span></a></li>
<li class="section"><a href="#"><span>Section D2</span></a></li>
<li class="section"><a href="#"><span>Section D3</span></a></li>
<li class="section"><a href="#"><span>Section D4</span></a></li>
<li class="section"><a href="#"><span>Section D5</span></a></li>
<li class="section"><a href="#"><span>Section D6</span></a></li>
</ul>
</li>
<li class="department dep-e">
<a href="#"><span>Department E</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section E1</span></a></li>
<li class="section"><a href="#"><span>Section E2</span></a></li>
<li class="section"><a href="#"><span>Section E3</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</figure>
</div>
解决方案
It's not the most extensible code snippet in the world, but the first task is to actually change the HTML to reflect your new semantic structure. That's the easy part.
The CSS isn't really built to deal with n level units of complexity or scale exceedingly well, but you can play around with what's there to move the elements across the screen. This should get you started at a very high level, but you should be familiar with making the individual adjustments to see that through and try to ask more pointed questions if you get stuck trying to accomplish a particular task.
The snippet below will look like this:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* Generic styling */
body{
background: #F5EEC9;
}
.content{
width: 100%;
max-width: 1142px;
margin: 0 auto;
padding: 0 20px;
}
a:focus{
outline: 2px dashed #f7f7f7;
}
@media all and (max-width: 767px){
.content{
padding: 0 20px;
}
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul a{
display: block;
background: #ccc;
border: 4px solid #fff;
text-align: center;
overflow: hidden;
font-size: .7em;
text-decoration: none;
font-weight: bold;
color: #333;
height: 70px;
margin-bottom: -26px;
box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
-webkit-transition: all linear .1s;
-moz-transition: all linear .1s;
transition: all linear .1s;
}
@media all and (max-width: 767px){
ul a{
font-size: 1em;
}
}
ul a span{
top: 50%;
margin-top: -0.7em;
display: block;
}
/*
*/
.administration > li > a{
margin-bottom: 25px;
}
.director > li > a{
width: 50%;
margin: 0 auto 0px auto;
}
.subdirector:after{
content: "";
display: block;
width: 0;
height: 130px;
background: red;
border-left: 4px solid #fff;
left: 45.45%;
position: relative;
}
.subdirector,
.departments{
position: absolute;
width: 100%;
}
.departments > li:first-child{
width: 18.59894921190893%;
height: 66px;
/* margin: 0 auto 92px auto; */
padding-top: 25px;
/* border-bottom: 4px solid white;*/
/* z-index: 1; */
}
.departments > li:first-child{
/* float: left; */
left: 27.2%;
border-right: 4px solid white;
}
.departments > li:first-child a{
width: 100%;
}
@media all and (max-width: 767px){
.subdirector > li:first-child,
.departments > li:first-child{
width: 40%;
}
.subdirector > li:first-child{
right: 10%;
margin-right: 2px;
}
.subdirector:after{
left: 49.8%;
}
.departments > li:first-child{
left: 10%;
margin-left: 2px;
}
}
.departments > li:first-child a{
right: 25px;
}
.department:first-child,
.departments li:nth-child(2){
/*margin-left: 0; */
/*clear: left; */
margin-left: 12%
}
.departments:after{
content: "";
display: block;
position: absolute;
width: 48.2%;
height: 22px;
border-top: 4px solid #fff;
border-right: 4px solid #fff;
border-left: 4px solid #fff;
margin: 0 auto;
top: 38px;
left: 21%
}
@media all and (max-width: 767px){
.departments:after{
border-right: none;
left: 0;
width: 49.8%;
}
}
@media all and (min-width: 768px){
.department:first-child:before,
.department:last-child:before{
border:none;
}
}
.department:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 22px;
border-left: 4px solid white;
z-index: 1;
top: -22px;
left: 50%;
margin-left: -4px;
}
.department{
border-left: 4px solid #fff;
width: 18.59894921190893%;
float: left;
margin-left: 5.751313485113835%;
margin-bottom: 60px;
}
.lt-ie8 .department{
width: 18.25%;
}
@media all and (max-width: 767px){
.department{
float: none;
width: 100%;
margin-left: 0;
}
.department:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 60px;
border-left: 4px solid white;
z-index: 1;
top: -60px;
left: 0%;
margin-left: -4px;
}
.department:nth-child(2):before{
display: none;
}
}
.department > a{
margin: 0 0 -26px -4px;
z-index: 1;
}
.department > a:hover{
height: 80px;
}
.department > ul{
margin-top: 0px;
margin-bottom: 0px;
}
.department li{
padding-left: 25px;
border-bottom: 4px solid #fff;
height: 80px;
}
.department li a{
background: #fff;
top: 48px;
position: absolute;
z-index: 1;
width: 90%;
height: 60px;
vertical-align: middle;
right: -1px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important;
background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
background-image: linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 );
}
.department li a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 80px;
width: 95%;
top: 39px;
background-image: none!important;
}
/* Department/ section colors */
.director a{ background: #5b9bd5; }
.department.dep-b a{ background: #ed7d31; }
.department.dep-c a{ background: #70ad47; }
.department.dep-d a{ background: #ffc000; }
<div class="content">
<h1>Responsive Organization Chart</h1>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a href="#"><span>Director</span></a>
<ul class="departments cf">
<li></li>
<li class="department dep-b">
<a href="#"><span>Department B</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section B1</span></a></li>
<li class="section"><a href="#"><span>Section B2</span></a></li>
<li class="section"><a href="#"><span>Section B3</span></a></li>
<li class="section"><a href="#"><span>Section B4</span></a></li>
</ul>
</li>
<li class="department dep-c">
<a href="#"><span>Department C</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section C1</span></a></li>
<li class="section"><a href="#"><span>Section C2</span></a></li>
<li class="section"><a href="#"><span>Section C3</span></a></li>
<li class="section"><a href="#"><span>Section C4</span></a></li>
</ul>
</li>
<li class="department dep-d">
<a href="#"><span>Department D</span></a>
<ul class="sections">
<li class="section"><a href="#"><span>Section D1</span></a></li>
<li class="section"><a href="#"><span>Section D2</span></a></li>
<li class="section"><a href="#"><span>Section D3</span></a></li>
<li class="section"><a href="#"><span>Section D4</span></a></li>
<li class="section"><a href="#"><span>Section D5</span></a></li>
<li class="section"><a href="#"><span>Section D6</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</figure>
</div>
这篇关于通过HTML / CSS制作组织结构图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
