css 有自动化生成方案吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2267 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如我先在某个地方调整好页面 dom 结构，然后对相应的节点选择样式，比如水平居中，点击选项后，样式文件自动加上

text-align:center;

过程可能是这样：

在网站手动拖动标签生成 dom 结构；
点击生成的标签，弹出各种 css 效果；（比如我选择了一个header标签，弹出一些样式，包括基本的高度宽度，内外边距，border，颜色，字体大小等等）
然后选择想要的样式，自动生成相应的 css，最后导出生成的 css 文件即可。

当然生成的可能都是比较基本的样式，毕竟 css 很复杂，但就这些基本的样式感觉也省了不少时间精力。
问下有没有类似的网站或者方案之类的。

CSS

样式

生成

边距

21 条回复 • 2018-09-03 13:24:46 +08:00

molvqingtai

2018-08-31 14:19:20 +08:00 via Android

墨刀

cooljs

2018-08-31 15:19:21 +08:00

@molvqingtai 墨刀只是设计图生成标注吧

cluulzz

2018-08-31 15:25:04 +08:00

emmm 可视化编辑？ Adobe Dreamweaver

xxx749

2018-08-31 15:27:19 +08:00 via Android

自己做也不难啊

shapl

2018-08-31 15:28:24 +08:00

Dreamweaver 帮到你。。

ChiangDi

2018-08-31 15:29:04 +08:00

Dreamweaver

CSGO

2018-08-31 15:54:49 +08:00

Dreamweaver 哪有可视化？我怎么用这么久都不知道？

cooljs

2018-08-31 16:20:59 +08:00

@CSGO 我在下载，想体验一下呢 0.0

cooljs

2018-08-31 16:21:17 +08:00

@shapl
@ChiangDi

@cluulzz
在下载，看下是什么样的

cooljs

2018-08-31 16:21:42 +08:00

@xxx749 比较复杂，有现成的就不用重复造轮子了

lrz0lrz

2018-08-31 16:31:55 +08:00

基本样式不如手写

复杂样式？肯定会出一堆乱七八糟的问题

比如垂直水平居中，至少有 10 种方法，每种方法都有缺点

cooljs

2018-08-31 16:39:05 +08:00

dw 的 css 设计器不是我想要的那种。。

cooljs

2018-08-31 16:40:40 +08:00

@lrz0lrz 暂时考虑的是基本的样式，复杂的未考虑。
基本样式比如高度只需要在一个 input 里输入数值就可以了，美滋滋~

P233

2018-08-31 16:55:30 +08:00

一直在研究这个方向，初步有点效果了，但距离完成还有很长一段路。

终极目标是做一款能够直接导出高质量 HTML + CSS 代码的设计工具。

Xiqiuqiu

2018-08-31 17:57:30 +08:00

之前看到过一些，不一定能满足需要 Link:http://www.imooc.com/article/1443

Xiqiuqiu

2018-08-31 17:58:09 +08:00

还有这个 https://github.com/emilwallner/Screenshot-to-code-in-Keras

leekafai

2018-08-31 21:55:38 +08:00 via Android

蓝湖

noe132

2018-08-31 21:58:45 +08:00

css 肯定是很那达到这样的水平的。

封装的组件可以暴露一些这样的属性。

noe132

2018-08-31 21:59:03 +08:00

fix: css 肯定是很难达到这样的水平的。

cooljs

2018-09-03 13:23:59 +08:00

@P233 厉害了，开源吗

cooljs

2018-09-03 13:24:46 +08:00

@Xiqiuqiu 谢谢