有没有工具可以移动网页上的元素来辅助设计？

Question

有没有什么工具/Firefox插件可以让你在页面上拖动元素(div，图片等)，并告诉你已经移动了多少(x，y)？这将大大加快设计页面的速度，而不是调整css，重新加载页面，调整css，重新加载页面。

我发现Firefox Web Developer extension在编辑css live时很有用，但它在使用时似乎隐藏了背景图片。

Answer 1

以下是我针对您的问题所使用的内容：

• 火狐扩展来测量viewport
• Firebug 1.5上的像素和它的HTML /right- half /外观。它是有用的，它是可编辑的。显然，我也经常使用样式窗格。点击说明的左边，暂时禁用它；右击，为左边半个窗口的超文本标记语言中选择的元素添加内联样式；样式旁边的小三角形可以向你显示系统样式(默认的rules)
• 是一个Firebug附加组件，覆盖在页面上，用于比较和对齐。

如果你的超文本标记语言和CSS的效果比你的设计差1px，不要走像素怪胎的路线，尽管:)

• 也是一个Firebug插件，它可以记录你在超文本标记语言窗格中所做的一切(很棒)，也可以记录你对的简短使用(不是很好)，比如Shift-Ctrl-F来获取px格式的字体大小信息。

这是最接近您要求的工具，尽管我不认为它是最有价值的工具。好吧，YMMV :)

​

• 您应该像使用St Jeff一样使用多显示器。

这是特别有用的，因为我总是转换某事:在Adobe软件中查看PSD/PNG并在编辑器中编写HTML代码，在编辑器中编写CSS规则并在浏览器中签入，在浏览器中审核网站的可访问性并在OOo编写器中写下结果。etc

• Reload page (在浏览器中，以及在文本编辑器中保存文件和切换窗口)可以只需按一次键:我很久以前就用一个AutoHotKey宏替换了browser / F5的Ctrl-S / Alt-Tab (如下代码)，并将其绑定到我的法语键盘上一个巧妙放置但无用的键上:位于Tab和Esc之间的²键。

把我从肌腱炎和/或腕管综合征中救了出来！

我使用死键和²在IE6、IE7和Safari上做同样的事情。

#NoEnv；4行开始AHK脚本

SendMode输入

SetWorkingDir %A_ScriptDir%

SetTitleMatchMode RegEx

#IfWinActive，记事本

²：

发送^s

IfWinExist，Mozilla Firefox

WinActivate，Mozilla Firefox

发送^r；刷新浏览器

IfWinNotActive，记事本

返回

​

下面是Firediff和我的其他生产力工具

Answer 2

我使用的一个技巧是..。

在一个监视器上使用常规文本编辑器执行html/css，并在另一个监视器上使用setTimeout(function(){ location.reload() }, 30000 );自动刷新浏览器。

如果你在linux上，你可能可以设置一个脚本，当你在css目录中“保存”文件时进行监视，这样当它们被实际保存时，将其绑定到浏览器并刷新选项卡，尽管我还没有真正做到这一点。

Answer 3

我不确定Firefox extension "Browser Turns Editor"是否是你想要的，但它可能是。我猜您必须在设计模式下编辑页面，然后在Firebug中检查页面的各个部分，以查看相应的HTML是什么。或者类似的东西。