四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_15:(掌握CSS背景与边框的创造性用法)
前端·css·ui·html·tensorflow
ZengLiangYi2 小时前
Tailwind CSS v4 + Vite:现代前端样式方案
前端·css·vite
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_12 :(值与单位的技能测试与深入理解)
前端·javascript·css·ui·交互
审判长烧鸡5 小时前
【AI问答/前端】前端瞒天过海局(三)
前端·vue·html5·js
এ慕ོ冬℘゜5 小时前
原生 JS 手写日期选择器|完整可复用日历组件实战
前端·javascript·css
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_10:(博客页面样式修复实战挑战)
前端·css
ZC跨境爬虫1 天前
跟着 MDN 学CSS day_9:(深入掌握CSS选择器核心技能测试)
前端·css·ui·html
sugar__salt1 天前
全栈开发最小知识图谱:语义化·DOM·模块化·npm
javascript·html5