四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
奶球不是球15 小时前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
我这一生如履薄冰~17 小时前
css属性pointer-events: none
前端·css
苏打水com19 小时前
第十九篇:Day55-57 前端工程化进阶——从“手动低效”到“工程化高效”(对标职场“规模化”需求)
前端·css·vue·html
xcLeigh21 小时前
HTML5实现好看的视频播放器(三种风格,附源码)
前端·音视频·html5
TE-茶叶蛋21 小时前
html5-qrcode扫码功能
前端·html·html5
2501_9064676321 小时前
HTML5结合Vue3实现百万文件分块上传的思路是什么?
前端·html·html5·vue上传解决方案·vue断点续传·vue分片上传下载·vue分块上传下载
kirinlau21 小时前
vue3+vite+scss项目使用tailwindcss
前端·css·scss
阿贾克斯的黎明21 小时前
现代前端的魔法标签:HTML5 语义化标签全解析
前端·html·html5