网站运营
位置:首页>> 网站运营>> Visual Firebug 1.11 使用帮助 chrome插件

Visual Firebug 1.11 使用帮助 chrome插件

作者:由校 来源:koubeiUED 发布时间:2011-01-25 12:45:00 

标签:chrome插件,Visual,Firebug,帮助

Visual Firebug是一个编辑在线页面CSS样式的chrome插件。它的产生是为了让一些不会使用firebug的视觉、交互、运营等同学能够快速、方便地修改在线页面。

当前版本:1.11

在线安装:google chrome extension

文档地址:http://www.zhouqicf.com/code-cola

内容索引

  1. 使用方法

    1. 开启插件

    2. 选择节点

    3. 编辑节点样式

    4. 获取节点样式

    5. 保存整页的修改结果

  2. 所有功能介绍

  3. 现有控件

    1. 列表项符号

    2. 字号

    3. 行高

    4. 字体

    5. 字形,包括加粗、斜体、下划线

    6. 字色

    7. 对齐方式

    8. 文字阴影

    9. 背景色

    10. 盒阴影

    11. 边框,包括边框及圆角

    12. 布局,包括内边距及外边距

    13. 宽高,包括宽度及高度

  4. 更新记录

    1. 1.1

一、使用方法

1、开启插件

点击chrome工具条上的图标即可,待插件加载完毕后,会在当前Tab的页面内插入面板,并默认自动开启元素选择功能。

2、选择节点

当鼠标移入某个节点时,该节点周围会出现蓝色边框,直接点击该点击,则选中该节点作为待编辑节点。

在节点上右键鼠标则会唤出与该节点相关的其它节点列表,鼠标移出这些列表项后,页面上同样将以蓝色边框的方式显示该列表项所对应的节点,如果该节点没有相关的其他节点列表,则会显示”no-selector”,并且该提示会在2秒钟后消失。相关节点列表包括”Tag选择”及”Class选择”两种方式,”Tag选择”将选中与该节点类型相同的节点,即如果当前节点为一个表格单元格(td),则会选中该单元格所在表格内的所有单元格;而”Class选择”将选中整个页面中拥有该class的所有节点。

按住ctrl键进行自由多选,选中某个元素后再次点击该元素将取消对此元素的选择,操作方式与window文件完全一致。

选择完节点后,在面板的左上方将出现当前待编辑节点的类型及数量。

3、编辑节点样式

通过面板上的控件编辑节点样式。

4、获取节点样式

点击面板右上角”查看样式”按钮,下方将展开一个文本域,显示当前编辑节点的样式,在修改样式的过程中,该区域的样式将实时更新,并且该区域中的样式都进行了缩写处理。

5、保存整页的修改结果

点击面板右上角”获取修改结果”按钮,页面的左上方将出现一个浮层,显示”loadding”,待加载完之后,该浮层将变大撑满整个屏幕,浮层内的内容正是修改后的html代码,复制代码到一个文本文件,并另存为”xxx.html”即可。视觉、交互等同学对某些网页进行微调时,不必再打开Photoshop、Axure等工具,直接打开本工具编辑即可,保存后即可丢给前端,前端看到效果后即可查看代码,在工具生成的代码的基础上code。

二、所有功能介绍

三、现有控件

  1. 列表项符号

  2. 字号

  3. 行高

  4. 字体

  5. 字形,包括加粗、斜体、下划线

  6. 字色

  7. 对齐方式

  8. 文字阴影

  9. 背景色

  10. 盒阴影

  11. 边框,包括边框及圆角

  12. 布局,包括内边距及外边距

  13. 宽高,包括宽度及高度

四、更新记录

1.1 更新内容 (2010-12-17)

  1. 按住ctrl进行元素的自由多选

  2. 增加了一个显示当前节点的功能,mouseover的时候显示当前节点

  3. 增加了about

  4. 修复了拖拽面板时仍在计算当前样式的bug

  5. 测试了多个网站,修正了样式影响

0
投稿

猜你喜欢

手机版 网站运营 asp之家 www.aspxhome.com