纯css3实现思维导图样式示例


Posted in HTML / CSS onNovember 01, 2018

思维导图又称之为脑图

他大概是这个样子滴:

纯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">
                            <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;
}

实际效果如图:

纯css3实现思维导图样式示例

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽,其中节点的增加,你只需要html中增加相应的节点代码就行,高度位置都是自适应的,感谢css3的 flex,你们活在这个时代是幸福的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 #HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP7多线程搭建教程
2017/04/21 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python中的ctime()方法使用教程
2015/05/22 Python
python创建进程fork用法
2015/06/04 Python
Python中作用域的深入讲解
2018/12/10 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python实现与redis交互操作详解
2020/04/21 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
Java基础知识面试题
2014/03/25 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
2014年五一促销活动方案
2014/03/09 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014个人年度工作总结
2014/12/15 职场文书
先进教师个人总结
2015/02/11 职场文书
十月围城观后感
2015/06/08 职场文书
女性健康讲座主持词
2015/07/04 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书