使用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实现思维导图样式示例的全部内容,希望对大家的学习有所帮助。