四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

  1. 打开方式
  • 右击→ 检查
  • 看哪里
  1. 选择元素
  • 两种常见方法
  1. 控制样式
  • 修改属性值
  • 添加属性
  • 控制样式生效
  1. 特殊情况
  • 出现删除线
  • 出现小三角形

1.2 Chrome调试工具总结

(拓展)查错流程(遇到样式出不来,要学会通过调试工具找错)

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
蓝莓味的口香糖1 天前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
是立不是利1 天前
CSS 的 Flex 布局——为什么元素没有按我想的排列
前端·css
java1234_小锋2 天前
【技术专题】CSS3 网页技术 - CSS3 盒模型
前端·css·css3
前端架构师-老李2 天前
HTML与CSS基础第四课—strong、em、b、i 各表示什么
前端·css·html
程序0072 天前
天地图实现收货地址定位
前端·javascript·css
汤米粥2 天前
目前流行的前端 CSS 框架
前端·css·bootstrap·ant design·‌tailwind css·bulma
是立不是利2 天前
CSS 的层叠与优先级——为什么我的样式不生效
前端·css
前端架构师-老李3 天前
HTML与CSS基础第二课—初识HTML
前端·css·html
java1234_小锋3 天前
【技术专题】CSS3 网页技术 - CSS3 单位、颜色、字体与文本
前端·css·css3
CappuccinoRose3 天前
拖拽交互体系
前端·javascript·css·html·交互·1024程序员节