RulersGuides.js标尺工具：在浏览器中对网页进行标尺测量

RulersGuides.js 是一个可以让网页显示标尺，辅助版面设计的 JavaScript 工具，适用于各种常用的浏览器。 在设计网页版面时，常常会需要量测网页中各个组件的位置与大小，这里我们介绍一个好用的网页量测工具 RulersGuides.js，它可以在网页中加入类似 Photoshop 的标尺，还可以拉出参考线，这个功能对于网页设计者而言非常实用。 RulersGuides.js 这个工具是使用 JavaScript 写成的，而安装上非常简单，只需要在浏览器中添加一个收藏网页就完成了。 如果你当前使用浏览器是的IE，则可以这个网址 Rulers&Guides 上面单击鼠标右键，在单击选择“添加到收藏夹”，在弹出的对话框中我们可以将这个收藏的网页命名为「Rulers&Guides」，然后保存到“收藏夹栏”。而若是使用非 IE 的浏览器（例如 Chrome 或 Firefox 等），则同样右键单击这个网址 Rulers&Guides ，在选择“将此链接添加为书签”，同样将网页名称命名为「Rulers&Guides」，也保存到“书签工具栏”。 添加到书签工具列之后就完成了，这时候你就可以开启想要用标尺量测的网页，然后再按下工具列中的这个链接，标尺就会显示出来了。 如果想要关闭标尺功能，只要再按一下这个链接即可。 点选左上角的红色标尺图示，可以开启功能选单，每个功能还有对应的快速键。 参考线的使用方式跟 Photoshop 一样，从左边的垂直标尺可以拖曳出垂直的参考线，上方水平的标尺则可以拖曳出水平的参考线。 除了用手直接拉参考线，他也可以让你设定参考线位置的最小单位，这样就可以很轻松拉出整齐的参考线。 再配合详细的资讯显示功能，整个版面配置就可以一目了然。 最后还有一个很好用的功能就是「Snap to DOM」，启动这个功能之后，在拖曳参考线的时候，会自动对齐网页中靠近的元素，例如对齐图片或是某个