ViewDiv是一款高效的可视化网页布局軟件，内置各种编辑工具和编辑器，可以快速的自动创建CSS样式，具有布局可視化、 CSS样式参数化、代碼生成自動化的特点，可降低网页布局的难度，极大的提高开发效率，需要的朋友可以来本站下载！

軟件功能

1、所見即所得

布局可視化

CSS參數化

代碼生成自動化

2、實時著色

多種元素同時著色

清晰分辨各種元素

3、可擴展工具欄

輕松添加各種模板

鍵應用輕松完成

4、多種項目模式

電腦頁面

移動設備頁面

支持柵格布局庫

ViewDiv使用教程

1、創建項目

1.1、默認模式：

创建窗口启动时的默认创建模式 ，常用于创建电脑上显示的网页，CSS单位px。

1.2、彈性布局：

选中弹性布局 ，在此模式下创建的网页可兼容多种移动设备的屏幕尺寸，CSS单位必需使用rem，在设置CSS单位时可以在输入px值，按下回车将会转换为rem，如在CSS设置面板，设置字号大小，输入16,按下回车键，将会自动转换为0.16，在此模式下自定义CSS样式也需要遵循此转换公式 100px=1rem。

1.3、在创建项目窗口中可选添加设计图，也可以创建完后通过“设置”菜单 “项目管理”进行修改。

1.4、选中“创建基类”将会为新创建的 CSS 添加基本的 CSS 设置。

1.5、在有设计图的情况下，画布尺寸跟随设计图的尺寸，反之则可自定义尺寸，文件编码支持UTF-8 和 GBK 。

2 、创建元素

2.1、项目创建完成后即可在画布上创建所需要的元素，如选中“区块 div 工具”在画布上画出需要的尺寸，整个的创建流程如同书写 HTML 代码相同。

布局順序：從左到右，從外到內的布局方式。

3、創建參考線

3.1在画布“顶部标尺”上按下鼠标向下拖动，可以创建出水平的参考线，在垂直标尺按下拖动可创建垂直方向的参考线。 删除参考线，可以将参考线拖回标尺，或在参考线上右键选择删除参考线。通过工具菜单可锁定参考线。

4、編輯CSS樣式

4.1、在文件名称的右侧 点击“编”按钮即可使用快速编辑功能

4.2、選中CSS內容使用文本編輯模式即可彈出CSS編輯窗口

4.3、在CSS編輯器右鍵，選擇“編輯”，可編輯當前位置的CSS類