CSS（層疊樣式表）是一種常用于網頁設計的語言，它讓我們可以很方便地控制網頁的布局和樣式. 在實際的開發中，經常會遇到需要創建組織結構圖的需求。以下是使用CSS制作組織結構圖的步驟。

// HTML結構
CEO
CFO
Manager1
Staff1
Staff2
Manager2
CTO
// CSS樣式
.org-chart ul {
list-style-type: none;
padding-left: 0;
}
.org-chart li {
position: relative;
}
.org-chart li >div {
border: 1px solid #ccc;
background-color: #f1f1f1;
padding: 5px 10px;
border-radius: 3px;
text-align: center;
width: 120px;
}
.org-chart li:before, .org-chart li:after {
content: '';
position: absolute;
top: 50%;
border-bottom: 1px solid #ccc;
width: 40%;
height: 1px;
}
.org-chart li:before {
left: -20%;
}
.org-chart li:after {
right: -20%;
}
.org-chart li:first-child:before, .org-chart li:last-child:after {
display: none;
}
.org-chart ul ul:before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
height: 100%;
}
.org-chart li li:before {
content: '';
position: absolute;
top: -20px;
left: 50%;
border-left: 1px solid #ccc;
width: 1px;
height: 20px;
}
.org-chart li li:last-child:before {
display: none;
}

首先，我們需要在HTML中添加組織結構的基本結構，在全局范圍內設置無序列表的樣式，去除默認的列表樣式。

接著，在列表項中添加組織結構圖的每個部門和人員信息，并為它們添加樣式：淺灰色背景和小圓角。

使用偽元素(:before, :after)為每個列表項添加豎線，以及為子級別的列表項添加橫線。注意，我們通過計算來確定偽元素的位置和長度，因此可以適應不同的列表項寬度。

最后，隱藏每個列表項的第一個和最后一個圖形元素的豎線，以及每個子列表最后一個圖形元素的橫線。

通過以上步驟，我們就可以非常方便地制作組織結構圖了，可以更好地展示公司的層級關系。