在網站和應用程序的開發中，思維導圖是一個非常重要的工具。它可以幫助用戶更直觀和簡潔地展示信息，并且可以用來規劃和組織大量的數據。在使用CSS實現思維導圖時，我們可以基于已有的HTML結構來進行布局和樣式的設置。

<div class="node">
<div class="title">節點標題</div>
<ul class="subnodes">
<li>子節點1</li>
<li>子節點2</li>
<li>子節點3</li>
</ul>
</div>

該結構包含了一個父節點和其下的若干子節點。我們可以使用CSS來設置節點和子節點的樣式。

.node {
width: 200px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 10px;
text-align: center;
background-color: #fff;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.subnodes {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.subnodes li {
margin: 10px 0;
}
.subnodes li:before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
background-color: #ccc;
border-radius: 50%;
vertical-align: middle;
}
.subnodes li:last-child:before {
display: none;
}

上述代碼中，我們首先設置了節點的基本樣式，包括寬度、邊框、圓角、內邊距、文本對齊和背景顏色等。然后，通過設置節點標題的字體大小、加粗和下方的間距來突出顯示節點的標題。

接下來，我們設置了子節點列表的樣式，包括去掉默認的列表標記、上下間距、左對齊和內邊距等。然后，我們使用:before偽類為每個子節點添加一個圓形標記，并設置樣式，以突出顯示子節點的關系。需要注意的是，在最后一個子節點前面不需要添加標記，因此使用了:last-child偽類來排除最后一個子節點，并將其前面的標記隱藏。

最后，我們可以將多個父節點和其下的子節點串起來，形成一個完整的思維導圖布局，實現圖形化展示信息和規劃數據的目的。