美文网首页
前端快捷操作汇总

前端快捷操作汇总

作者: 如果仲有听日 | 来源:发表于2020-04-13 23:01 被阅读0次

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. 判断字体和字的大小

相关文章

网友评论

      本文标题:前端快捷操作汇总

      本文链接:https://www.haomeiwen.com/subject/uxjnmhtx.html