背景
我的强项是后端开发,很少涉及前端开发,一个很重要的原因是前端布局太妖,要实现一个居中需要各种奇技淫巧,而且每个浏览器实现还不一样,前端的布局就像谜一样,你都不知道为啥就可以了,也不知道为啥就不行。直到Flex布局的出现前端的布局终于有点章法了,第一次接触Flex布局是从阮一峰的博客Flex 布局教程,阮一峰写博客的能力确实厉害,通俗易懂又直击要害,建议想要入门Flex都去拜读一下。那么写这篇文章的目的是从一个后端的角度去看Flex布局,如果你看完阮一峰的博客后仍然有一些疑问,那么可以读一读这篇文章。
Flex基本概念
Flex布局包括容器(flex container)和项目(flex item),比如下面这段代码
<div class="content">
<div class="block"></div>
<div class="block"></div>
</div>
content这个div就是容器,block的div就是项目
Flex核心就是靠两根轴进行布局的调整,其实就是水平和垂直两个方向,只不过在Flex中水平方向称为主轴,垂直方向称为交叉轴,每个方向各有start center end
三个方位,其实就是左边中间和右边三个方位。
Read the rest of this entry
flex
介绍
grapesjs是一个开源的网页设计器,你可以理解为在线低配版Dreamweaver,和Dreamweaver不同的是,grapesjs可以灵活的进行二次开发,实际上grapesjs只是构建了设计器最基础的部分,没有二次开发grapesjs也没有意义,如果你恰好有以下需求,那么grapesjs将非常适合你
- 页面在线设计编辑,并且能自定义组件
- 可以导出源码
- 提供属性配置
- 灵活的二次开发机制
使用
grapesjs使用方法很简单,如果是html页面,可以直接通过导入js和css即可
Read the rest of this entry
背景
长久以来都想找一个画流程图的工具,有几个需求,可以将组件拖到绘图面板中,并且组件间可以通过线进行关联,在属性面板可以配置组件的属性,这里的组件可能是html的组件,也可能是一个功能,为什么需要这么一个东西呢?如果有这东西,很多想法就可以实现,比如
但一直找不到满意的框架,很大原因就是这些框架颜值太低,直到遇到NodeRed,NodeRed是物联网开发工具,提供可视化界面通过配置就能实现物联网程序的开发,让我感兴趣的是NodeRed可视化界面,颜值高,操作便利,简洁不花哨
因为NodeRed是开源的,也花了一段时间去研究他的代码,想把可视化工具抽离出为我所用,种种原因失败了,既然抽离不出来,能不能自己实现一个?之前从来没想过自己开发一个,但细想觉得并不难实现,可视化界面核心有两点
Read the rest of this entry