在之前的教程中，我们学习了如何创建不同类型的图表，包括条形图、温度计图表和圆环图。今天，我们将通过构建仅 css 的组织结构图来继续这一旅程。
准备好测试你的 CSS 技能了吗？
我们正在构建的组织结构图
这是我们将要创建的 CSS 图表：
See the Pen How to Build a CSS-only Organizational Chart by Envato Tuts+ (@tutsplus) on CodePen.
它由四个级别组成，描述了公司的层次结构。
什么是组织结构图？
为了找出组织结构图是什么，让我们借用维基百科的定义：
“组织结构图，也称为组织结构图或组织结构图，是显示组织结构及其部分和职位/工作的关系和相对等级的图表。该术语也用于类似的图表，例如显示知识领域或一组语言的不同元素的图表。”
这是一个例子：
这种类型的图表通常用于呈现公司人员或部门之间的关系。在公司网站上，您可能会在“关于我们”或“公司”页面上找到它。
您还将看到用于家谱的组织结构图（查看 BBC 网站上的英国皇室家族树和继承线）。它们非常适合说明层次结构。
1.指定容器
我们的图表将存在于一个容器中：
<divclass="container"><!-- chart goes here --></div>
2.定义一些基本样式
在通过它的关卡之前，我们将设置一些重置规则和帮助类：
:root {
--level-1: #8dccad;
--level-2: #f5cc7f;
--level-3: #7b9fe0;
--level-4: #f27c8d;
--black: black;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ol {
list-style: none;
}
body {
margin: 50px 0 100px;
text-align: center;
font-family: "Inter", sans-serif;
}
.container {
max-width: 1000px;
padding: 0 10px;
margin: 0 auto;
}
.rectangle {
position: relative;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
注意rectangle课堂。我们将把它附加到图表的每个节点/元素上。
注意：为简单起见，我没有优化 CSS。这将帮助您更好地了解每个级别的样式。
3.指定级别
此时，我们已准备好指定图表级别；正如我们之前讨论的，这里我们将有四个：
从最高级别开始，每个级别将代表公司中的一个角色。
1级
第一级将仅包含一个节点：
html
为了描述它，我们将使用一个h1标签，因为它是我们图表中最重要的部分：
<h1class="level-1 rectangle">...</h1>
CSS
我们将使用它的::before伪元素来创建第一层和第二层之间的关系：
/*CUSTOM VARIABLES HERE*/
.level-1 {
width: 50%;
margin: 0 auto 40px;
background: var(--level-1);
}
.level-1::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}
2 级
第二级将由两个节点组成：
正如我们稍后将看到的，每个节点都将包含其他子节点。
这些子节点将代表较低级别的管理层次结构。
HTML
为了描述它，我们将使用带有两个列表项的有序列表。每个列表项将包含一个h2元素：
<ol class="level-2-wrapper">
<li>
<h2 class="level-2 rectangle">...</h2>
</li>
<li>
<h2 class="level-2 rectangle">...</h2>
</li>
</ol>
CSS
感谢 CSS Grid，我们将为这个级别创建布局。
接下来，我们将使用::before特定元素的伪元素来创建该级别的节点与相邻级别之间的关联：
/*CUSTOM VARIABLES HERE*/
.level-2-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.level-2-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: 25%;
width: 50%;
height: 2px;
background: var(--black);
}
.level-2-wrapper::after {
display: none;
content: "";
position: absolute;
left: -20px;
bottom: -20px;
width: calc(100% + 20px);
height: 2px;
background: var(--black);
}
.level-2-wrapper li {
position: relative;
}
.level-2-wrapper > li::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}
.level-2 {
width: 70%;
margin: 0 auto 40px;
background: var(--level-2);
}
.level-2::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}
.level-2::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}
请注意，我们还定义了::after二级节点的伪元素。这只会出现在小屏幕上。
3 级
第三级将包括四个节点。
我们将前两个节点与第二层的第一个节点相关联，而后两个节点与其第二个节点相关联：
HTML
尽管如此，在第二级所在的初始列表中，我们将定义两个新列表。它们中的每一个都将包含两个列表项。对于每个项目将指定一个h3 元素：
<ol class="level-2-wrapper">
<li>
...
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">...</h3>
</li>
<li>
<h3 class="level-3 rectangle">...</h3>
</li>
</ol>
</li>
<li>
...
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">...</h3>
</li>
<li>
<h3 class="level-3 rectangle">...</h3>
</li>
</ol>
</li>
</ol>
CSS
再次感谢 CSS Grid，我们将定位节点。
同样，我们将设置::before特定元素的伪元素以创建所需的连接：
/*CUSTOM VARIABLES HERE*/
.level-3-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
width: 90%;
margin: 0 auto;
}
.level-3-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: calc(25% - 5px);
width: calc(50% + 10px);
height: 2px;
background: var(--black);
}
.level-3-wrapper > li::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
width: 2px;
height: 20px;
background: var(--black);
}
.level-3 {
margin-bottom: 20px;
background: var(--level-3);
}
级别 #4
第四级需要 16 个节点。这些将平均分配到四个列表中。
每个第三级节点将包含一个列表：
HTML
尽管如此，在第二级所在的初始列表中，我们将定义四个新列表。它们中的每一个都将包含四个列表项。对于每个项目将指定一个h4元素：
<ol class="level-2-wrapper">
<li>
...
<ol class="level-3-wrapper">
<li>
...
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">...</h4>
</li>
...
</ol>
</li>
<li>
...
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">...</h4>
</li>
...
</ol>
</li>
</ol>
</li>
<li>
...
<ol class="level-3-wrapper">
<li>
...
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">...</h4>
</li>
...
</ol>
</li>
<li>
...
<ol class="level-4-wrapper">
<li>
<h4 class="level-4 rectangle">...</h4>
</li>
...
</ol>
</li>
</ol>
</li>
</ol>
CSS
再一次，我们将设置::before特定元素的伪元素，用于将四级节点与其父节点关联起来：
/*CUSTOM VARIABLES HERE*/
.level-4-wrapper {
position: relative;
width: 80%;
margin-left: auto;
}
.level-4-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 2px;
height: calc(100% + 20px);
background: var(--black);
}
.level-4-wrapper li + li {
margin-top: 20px;
}
.level-4 {
font-weight: normal;
background: var(--level-4);
}
.level-4::before {
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}
组织结构图和响应式
使组织结构图具有响应性是很棘手的。我记得自己不得不重建标记一到两次，直到提出这个版本。因此，如果您打算创建这样的图表，我建议您遵循移动优先的方法。
考虑到这一切，这是它的移动布局：
为了实现这种行为，我们必须修改一些样式：
@media screen and (max-width: 700px) {
.rectangle {
padding: 20px 10px;
}
.level-1,
.level-2 {
width: 100%;
}
.level-1 {
margin-bottom: 20px;
}
.level-1::before,
.level-2-wrapper > li::before {
display: none;
}
.level-2-wrapper,
.level-2-wrapper::after,
.level-2::after {
display: block;
}
.level-2-wrapper {
width: 90%;
margin-left: 10%;
}
.level-2-wrapper::before {
left: -20px;
width: 2px;
height: calc(100% + 40px);
}
.level-2-wrapper > li:not(:first-child) {
margin-top: 50px;
}
}
我们已经完成了我们的 CSS 图表！
恭喜，伙计们！在没有编写任何 javascript 代码的情况下，我们设法构建了一个功能齐全的组织结构图。
让我们提醒自己我们构建了什么：
See the Pen How to Build a CSS-only Organizational Chart by Envato Tuts+ (@tutsplus) on CodePen.
当然，请记住，我们的图表具有特定的结构。根据您的需要，您可能希望丰富其内容或修改其布局。如果您需要更高级或动态的东西，请查看一些 JavaScript 库，例如Highcharts.js。
你有没有创建过 CSS 图表？如果是这样，请与我们分享您的经验！
- 1级
- html
- CSS
- 2 级
- HTML
- CSS
- 3 级
- HTML
- CSS
- 级别 #4
- HTML
- CSS
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
