网格设置、对齐网格、对齐对象、拖出辅助线

尹广磊

学习目标：

学习网格设置、对齐网格、对齐对象、拖出辅助线的差别与技巧。


教程开始：

见下图，在编辑区右键可以选择“显示网格”，其它一些相关设置也在这里。




1. 编辑区右键，点击“网格设置”，照下图，把网格间距由默认的10用手输入的方式改为5像素，
    这样会利用在一些细节位置上的对齐，后面示例会讲到这么设置的技巧所在。




2. 编辑区右键，确认“对齐网格”是开启状态，见下图，显示对勾表示开启。




见下图，在对齐网格状态下，控件位置及大小都会正好与网格对齐。
这样所有控件在网页中的坐标和大小都会是网格的倍数，方便它们的规范和对齐。




3. 编辑区右键，确认“对齐对象”是开启状态，见上面头图，“对齐对象”前的对勾表示开启。
    开启状态下，页面中拖放控件时会自动与周围的控件就边界对齐或中线对齐显示辅助线。




4. 拖出辅助线，鼠标按在标尺上，向编辑区拖放，可以拉出辅助线，方便对齐。
    左侧标尺上向右拉，顶部标尺上向下拉。辅助线上右键可以锁定或删除。




示例文件：

Great

学习啦

854003380

Got it

刘方

这个辅助线类似 ps中的辅助线，也可以直接拖出编辑区来删除。学习

mathlogic

学习网格、辅助线、对齐

CC蟹

get