纯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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 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
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python实现矩阵乘法的方法
2015/06/28 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
生物技术专业研究生自荐信
2013/09/22 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
项目转让协议书
2014/10/27 职场文书
学校团代会开幕词
2016/03/04 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers