纯css3实现思维导图样式⽰例
思维导图⼜称之为脑图
他⼤概是这个样⼦滴：
⽹上⼤部分实现有⽤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">
js实现轮播图最简代码
<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，你们活在这个时代是幸福的
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。