css 有自动化生成方案吗?

2018-08-31 14:08:42 +08:00
 cooljs

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

text-align:center;

过程可能是这样:

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

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

2069 次点击
所在节点    问与答
21 条回复
molvqingtai
2018-08-31 14:19:20 +08:00
墨刀
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
自己做也不难啊
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
leekafai
2018-08-31 21:55:38 +08:00
蓝湖
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 厉害了,开源吗

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/484918

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX