四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
里欧跑得慢15 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
凯瑟琳.奥古斯特19 小时前
Redis是什么及核心特性
前端·css·redis·缓存
DFT计算杂谈19 小时前
VASP官方教程 TRIQS DFT+DMFT计算教程
运维·css·自动化·html·css3
可达鸭小栈1 天前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
yqcoder1 天前
CSS 迷思破解:`:nth-child` vs `:nth-of-type`
前端·css
遇见~未来1 天前
第六篇_CSS进阶_深入浏览器与工程化
前端·css·rust
xingpanvip1 天前
星盘接口开发文档:日运语料接口指南
android·开发语言·前端·css·php·lua
之歆1 天前
Day05_CSS完整博客笔记(下)
前端·css·笔记
之歆1 天前
Day05_CSS完整博客笔记(上)
前端·css·笔记
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_7:(进阶文本语义标签全覆盖)
前端·javascript·css·ui·html