纯css3实现思维导图样式示例_css3_CSS_网页制作-HTML5中文学习网

思维导图又称之为脑图

他大概是这个样子滴：

网上大部分实现有用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;}

实际效果如图：