前端快捷操作汇总
1. Sublime Text3 快捷方式
需要安装emmet插件:先安装package control,参考官网安装package install,之后在窗口中输入emmet进行安装,安装好后按Ctrl+e检验有效性,如果报错,根据提示解决插件问题
1. 生成标签 直接输入标签名按Tab键
2. 生成多个同名标签, 例如 div*3 再按tab键
3. 如果有父子关系,使用ul>li, 按tab键。ul>li*5
4. 如果是同级标签:使用div+span,按tab键。 div+p*5
5. 如果已经定义类选择器,生成带有类名或者id名字的标签,直接在body中写.类名或者#类名, 再按tab键
2. 浏览器操作
2.1 html开发者工具
F12
2.2 在开发者工具中快速取色
2.3 快速复原浏览器窗口以100%显示页面
Ctrl+0
2.4 JS中console.log()生成的日志
F12 -> console
2.5 JS的单步调试
F12 -> sources
3. FastStoneCapture
3.1 测量px
Settings最后一个图标 -> Screen Ruler
3.2 截图测量px
Caputure Fixed-size Region 再配合PS cc使用
4. Photoshop CC
4.1 取色
使用PSCC的取色工具
4.2 显示/隐藏标识
Ctrl+r
显示标尺后,在标尺上右键,将单位改成pixel
4.3 放大缩小
方法一:
Ctrl +:放大 Ctrl -:缩小
方法二:
Ctrl+空格+鼠标左键拖动
4.4 图片整体移动
空格键+鼠标左键
4.5 选框 与 撤销选框
Ctrl+d: 侧小选区
4.6 切片步骤
1. 选择切片工具
2. 选取想要切出的区域
切片区域可以微调
3. 选择保存为web格式
4. 选择保存文件格式为png-8
5. 保存选中的切片
6. 判断字体和字的大小
想持续了解更多,不妨点赞和关注呗。
创作不易,感谢支持!
Web前端技术交流q群:859794646,
群里可以一起学习编程,进群能领到学习资料以及源代码