Miscellaneous工具包含了很多有意思的功能，我们只讲三个与CSS网页布局开发有关系的功能。如下图：

 

 

 

1、Display Line Guides　辅助线功能，我们在Photoshop或Fireworks等图象处理软件中，提供了额外的辅助线功能，方便图片文件在处理过程中的对齐等。在Web Developer插件所提供的这个功能，达到了同样的效果。我们点选该命令就可以看到辅助线了，如下图：

 

 

 

我们发现当鼠标移到辅助线的时候，还会提供一些额外的信息，如当前的绝对位置是多少，距离上一条、下一条辅助线的距离。我们可以通过面板中的Add Horizontal Line Guide增加一条水平辅助线；Add Vertical Line Guide可以增加一条垂直辅助线。通过Color改变辅助线的颜色。是不是非常方便？快试试吧！吼吼。

2、Display Ruler　标尺或测量工具。点选这个命令，可以在页面中的任何位置画一个矩形，会有一个TIP提示相关的信息，坐标、长与宽等。在移动鼠标的时候，这个TIP也会提示相应的值，如下图：

 

 

 

3、Edit HTML　编辑HTML工具。大家一定还记得CSS工具菜单下的Edit CSS工具，这个功能与之类似，不同的是编辑的是xhtml代码。点击这个命令，FF左侧打开一个编辑窗口，将网页源文件xhtml代码放置其中了，我们可以在这个窗口中随意的更改与编辑，并且右侧的网页将按修改后的代码实时显示出来。够爽吧，前面的编辑了CSS，这个实时调整一下XHTML，并且能实时查看效果。如下图：

 

 

有了这个功能，我们可以真正的实现了在这个环境中进行开发，而且学习别人的作品时，也能兼顾xhtml编码的学习。方便实用！

 

〖DIV+CSS教程〗Tags: DIV+CSS 设计 Firefox Miscellaneous 插件

所属专题：火狐插件火狐插件