怎样快速可视化制作CSS

html-css010

怎样快速可视化制作CSS,第1张

快速可视化制作CSS推荐使用第三方工具,推荐如下:

1、Bootstrap的可视化制作工具:Jetstrap:

Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的页面,它会自动适配手机端和 Pad 端(响应式设计)。

2、Bootstrap可视化编辑器工具-LayoutIt

简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。

3、Bootstrap的可视化制作工具:bootswatchr

bootswatchr是从地面上创建一个自定义的BootStrap主题的可视化工具。最大的方便就是 我们可以在左侧修改css或者html代码,然后修改结果会直接会显示在右侧。更重要是一个在线编辑和免费生成Bootstrap主题的酷站。

在dreamweaver cc中可以直接创建css文件,或在内面内手写输入css代码定义规则等等。

如果要使用可视化css编辑,可以使用css设计器,在默认的界面下,在软件窗口右侧的活动窗口内就可以找到css设计器。

例如:新建一个html文件,点击css设计器的“源”窗口的“+”号,选择创建css的方式,包括:新建css;附件已有的css或在页面内创建css样式。

点击“选择器“窗口的”+“号,选择body,可以看到下面的”属性“窗口内显示出可以编辑的属性列表,鼠标点击相应的属性就可以选择或填写数值进行编辑了,在编辑的时候在”设计“窗口会显示样式的变化。

最后如果是新建的css文件,保存路径要正确。

我一般页面写都是用DW做的,编辑过很多DIV CSS页面,感觉还不错。

不过我强烈推荐你使用firefox的web-developer插件,这个在查找div css错误时非常好用,毕竟再所见即所得的编辑器也有不足的地方,两者配合使用非常好。

另外针对IE对CSS的支持问题,你可以安装IETester软件,这个软件可以从IE5到IE8分别显示,可以让你查看在各种IE版本下的显示,非常适合于查找各种版本的错误信息。