纯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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 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 日期加减的类,很不错
2009/10/10 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python中Django文件上传方法详解
2020/08/05 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
生日主持词
2014/03/20 职场文书
求职教师自荐书
2014/06/19 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript