Firebug折腾记_(2)HTML&CSS定位及调试小技巧
2015-08-21 12:16
591 查看
题外话
传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的;而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果;
在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!;
定位HTML元素的三种方式
进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择默认快捷键,
Ctrl + shift + C
鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素
HTML及CSS简单调试
##HTML元素编辑除了写死的代码结构不能操作外(比如DIV块标签),内部的各种属性和内容都支持实时修改和预览的;
修改其中内容,只要单击你选中的东东即可,会有一个小小的蓝色框框出来
比如:
类(class)
行内样式(style)
目标(target)
链接(href)
文本内容
增加额外属性,在包含块的第一个标签的括号内单击即可添加自己想要增加的
HTML DOM选定
可以轻而易举的选定各种包裹层和父类,单击即可CSS元素编辑(实时预览)
支持禁用某个属性,点击属性旁边的红色圈圈,被禁用属性会变成灰色修改某个属性
增加某个属性
CSS像素微调技巧
CSDN不支持GIF动态图..所以没做…..百看不如一试方向键↑或者
方向键↓,上增加1px(em==),下减去1px(em==)
Ctrl+↑或者
Ctrl+↓,上增加0.1px(em==),下减去0.1px(em==)
shift+↑或者
shift+↓,上增加10px(em==),下减去10px(em==)
概览区域
计算出样式可以 – 可以计算我们选定块的整体大小,很实用布局 – 盒模型查看,用来调试布局妥妥的
样式下拉菜单 – 实时查看链接的效果
这里面更改颜色显式的模式,及链接的效果实时查看,比如你选定一个a链接区域,
CSS有设置了hover,focus这些事件,勾选了即可看到添加样式的效果而不需要移动触发
快捷键及自定义
全局自定义快捷键调用:ctrl+shift+alt+b,当然也可以点击”瓢虫进去”
Firebug全局快捷键,支持自定义
哪个和你的习惯冲突了.修改内部快捷键保存确定即可生效
相关文章推荐
- 纯CSS3制作的圆角效果按钮菜单
- CSS 简单样式
- IE6 、IE7 、 IE8 的 CSS 、 JS 兼容
- 前端工程师必须收藏的移动的全局CSS
- 20、CSS
- CSS基础知识学习笔记
- css的#和.的区别
- css style与class之间的区别,cssclass
- NSMutableAttributedString 自定义文字内容的样式 间距,对其 方向 间隔之类
- 网页分页实现(css+js)
- CSS hack方式一览
- 81 css ie8无法识别背景图片
- 使用CSS3画出一个叮当猫(超级可爱!)
- div+css 居中布局
- CSS盒子模型
- 用Emmet写CSS3属性会自动添加前缀
- CSS:重量和级联规则,确定其优先级
- Html和CSS的关系
- 一些简单的css和js知识
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())