腦圖是一種常用于展示概念和思路關系的圖表,通常使用樣式相似的節點進行描述。在前端開發中,我們可以使用 CSS 實現類似效果。
接下來,我們介紹一種使用 CSS 實現腦圖節點分布布局的方法。首先,我們將每個節點放置在一個容器內,該容器使用<div>
元素表示,設置以下樣式:
.node { position: relative; width: 100px; height: 50px; background-color: #fff; border: 1px solid #333; text-align: center; line-height: 50px; margin: 10px 20px; }
其中,position: relative;
可以讓元素以父元素為參考點進行定位;width
和height
控制節點寬高;background-color
和border
樣式控制節點的背景和邊框,margin
則控制節點之間的間距。
下一步,我們需要將節點分布成樹狀形狀。這可以使用flexbox
布局實現:
.container { display: flex; flex-wrap: wrap; justify-content: center; }
其中,display: flex;
表示使用 flexbox 布局;flex-wrap: wrap;
讓容器內的節點自動換行;justify-content: center;
規定每行節點居中對齊。
最后,我們可以添加一些交互效果來增強用戶體驗。例如,當用戶鼠標懸停在某個節點上時,節點變色:
.node:hover { background-color: #eee; }
這樣就完成了一個簡單的腦圖效果。完整代碼如下:
<html> <head> <style> .node { position: relative; width: 100px; height: 50px; background-color: #fff; border: 1px solid #333; text-align: center; line-height: 50px; margin: 10px 20px; } .node:hover { background-color: #eee; } .container { display: flex; flex-wrap: wrap; justify-content: center; } </style> </head> <body> <div class="container"> <div class="node">節點 1</div> <div class="node">節點 2</div> <div class="node">節點 3</div> <div class="node">節點 4</div> <div class="node">節點 5</div> <div class="node">節點 6</div> <div class="node">節點 7</div> <div class="node">節點 8</div> </div> </body> </html>