四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
3秒一个大1 小时前
模块化 CSS:解决样式污染的前端工程化方案
css·vue.js·react.js
kilito_012 小时前
数字时钟翻页效果
javascript·css·css3
霍理迪3 小时前
CSS布局方式——弹性盒子(flex)
前端·css
研☆香4 小时前
html css js文件开发规范
javascript·css·html
困惑阿三4 小时前
CSS 动效交互实验室
前端·css
卡尔特斯18 小时前
CSS 特殊符号 / 英文导致换行问题速查表
css
Komorebi゛18 小时前
【CSS】斜角流光样式
前端·css
Irene199119 小时前
CSS 废弃属性分类总结
前端·css
San30.1 天前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
前端·css·vue.js·react.js
23级二本计科1 天前
前端 HTML + CSS + JavaScript
前端·css·html