思維導圖又稱之為腦圖
他大概是這個樣子滴：
網上大部分實現有用d3.js實現，有手動用svg實現，最近工作需要，本人很懶，在琢磨看看用css3能不能實現呢？
答案是肯定的 下面上代碼
html代碼
| <div class="mainBody" id="node1"> <h1>node1</h1> <div class="oneBody"> <div class="mainBody"> <h1>node2</h1> <div class="oneBody"> <div class="mainBody"> <h1>node3</h1> <div class="oneBody"> <div class="mainBody"> <h1>node4</h1> </div> <div class="mainBody"> <h1>node4</h1> </div> <div class="mainBody"> <h1>node4</h1> </div> </div> </div> <div class="mainBody"> <h1>node3</h1> </div> <div class="mainBody"> <h1>node3</h1> </div> </div> </div> <div class="mainBody"><h1>node2</h1></div> <div class="mainBody"><h1>node2</h1></div> </div></div> |
css3代碼
| .mainBody{ display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; justify-content: flex-start ;}.sbody{}.oneBody{ display: -webkit-flex; /* Safari */ display: flex; flex-direction: column; justify-content: space-around;}#node1{ /*height: 200px;*/ margin-top: 100px; margin-left: 100px;}h1{ line-height: 100%; display: -webkit-flex; /* Safari */ display: flex; flex-direction: column; justify-content: center;} |
實際效果如圖：
哦有點簡陋····不過樣式什么的你想怎么搞就怎么搞嘍，其中節點的增加，你只需要html中增加相應的節點代碼就行，高度位置都是自適應的，感謝css3的 flex，你們活在這個時代是幸福的
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
