四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
CarIise19 小时前
下拉菜单HTML/CSS/JS实现
前端·css
里欧跑得慢1 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
烂蜻蜓2 天前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
夏炳辉.2 天前
Flex布局中 flex: 1 的完整解析与实战指南
前端·css·css3
zhanghaha13142 天前
HTML系列教程:8_HTML 文本格式化标签
前端·css·html
csuzhucong3 天前
二十一 - 四十阶魔方
javascript·css·html
言乐63 天前
Python关于老游复刻与创新2
前端·javascript·css·python·css3
软件技术NINI4 天前
传统文化html+css 5页
前端·css·html
海兰5 天前
【应用】UUID v7 生成器 HTML 代码
css·html·css3
ly76895 天前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5