使用css3實現思維導圖樣式示例

思維導圖又稱之為腦圖，本篇文章主要介紹了使用css3實現思維導圖樣式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

思維導圖又稱之為腦圖

他大概是這個樣子滴：

網上大部分實現有用d3.js實現，有手動用svg實現，最近工作需要，本人很懶，在琢磨看看用css3能不能實現呢？

答案是肯定的 下面上程式碼

html程式碼

1. <div class="mainBody" id="node1">
2.     <h1>node1</h1>
3.     <div class="oneBody">
4.         <div class="mainBody">
5.             <h1>node2</h1>
6.             <div class="oneBody">
7.                 <div class="mainBody">
8.                     <h1>node3</h1>
9.                     <div class="oneBody">
10.                         <div class="mainBody">
11.                             <h1>node4</h1>
12.                         </div>
13.                         <div class="mainBody">
14.                             <h1>node4</h1>
15.                         </div>
16.                         <div class="mainBody">
17.                             <h1>node4</h1>
18.                         </div>
19.                     </div>
20.                 </div>
21.                 <div class="mainBody">
22.                     <h1>node3</h1>
23.                 </div>
24.                 <div class="mainBody">
25.                     <h1>node3</h1>
26.                 </div>
27.             </div>
28.         </div>
29.         <div class="mainBody"><h1>node2</h1></div>
30.         <div class="mainBody"><h1>node2</h1></div>
31.     </div>
32. </div>

css3程式碼

1. .mainBody{
2.     display: -webkit-flex; /* Safari */
3.     display: flex;
4.     flex-direction: row;
5.     justify-content: flex-start ;
6. }
7. .sbody{
8.  
9. }
10. .oneBody{
11.     display: -webkit-flex; /* Safari */
12.     display: flex;
13.     flex-direction: column;
14.     justify-content: space-around;
15. }
16. #node1{
17.     /*height: 200px;*/
18.     margin-top: 100px;
19.     margin-left: 100px;
20. }
21. h1{
22.     line-height: 100%;
23.     display: -webkit-flex; /* Safari */
24.     display: flex;
25.     flex-direction: column;
26.     justify-content: center;
27. }

實際效果如圖：

哦有點簡陋····不過樣式什麼的你想怎麼搞就怎麼搞嘍，其中節點的增加，你只需要html中增加相應的節點程式碼就行，高度位置都是自適應的，感謝css3的 flex，你們活在這個時代是幸福的

以上就是使用css3實現思維導圖樣式示例的全部內容，希望對大家的學習有所幫助。