四、Chrome调试工具

四、Chrome调试工具

1.1 Chrome调试工具操作

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

1.2 Chrome调试工具总结

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

1. PxCook的基本使用

  1. 1.通过软件打开设计图
  • 打开软件
  • 拖拽入设计图
  • 新建项目
  1. 2.常用快捷键
  • 放大设计图: ctrl ++
  • 缩小设计图: ctrl ±
  • 移动设计图:空格按住不放,鼠标拖动
    1. 常用工具
  • 量尺寸
  • 吸颜色
  1. 从psd文件中直接获取数据
  • 切换到开发界面,直接点击获取数据
相关推荐
人良爱编程2 小时前
Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图
前端·javascript·apache·echarts·css3·html5
RFCEO9 小时前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
WooaiJava10 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
夜郎king13 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵14 小时前
HTML5里最常用的十大标签
前端·html·html5
夏幻灵16 小时前
CSS三大特性:层叠、继承与优先级解析
前端·css
会编程的土豆1 天前
新手前端小细节
前端·css·html·项目
珹洺1 天前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu1 天前
VS Code HTML CSS Support 插件详解
前端·css·html
咔咔一顿操作2 天前
轻量无依赖!autoviwe 页面自适应组件实战:从安装到源码深度解析
javascript·arcgis·npm·css3·html5