纯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垂直手风琴菜单
Jun 28 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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
xml+php动态载入与分页
2006/10/09 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Node.js学习入门
2017/01/03 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python多进程间通信代码实例
2019/09/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python 图片处理库exifread详解
2021/02/25 Python
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
企业厂长岗位职责
2013/12/17 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
兵马俑的导游词
2015/02/02 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android