运用CSS3怎样做思维导图样式，代码是什么

发布时间：2023-10-03 14:57:35 所属栏目：语言来源：

导读：网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？

答案是肯定的下面上代码

html代码

<div class="mainBody" id="node1">

<h1>node1</h

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

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!