## 设计图
#### 切图
用PS打开设计图
![](https://box.kancloud.cn/450b8f97d4522877c68556cef324570a_709x243.png)
![](https://box.kancloud.cn/400b7591538382cc7ba4e10e28bed8d5_695x453.png)
![](https://box.kancloud.cn/8a18ca7df05ad151646b836a402195e9_990x536.png)
![](https://box.kancloud.cn/79db332c721cd2ee51182c6adf1c5549_740x450.png)
就是这样慢慢的把所有的图标都拖到新窗口
<br>
![](https://box.kancloud.cn/5b386b71b7d1f9da6289c6b68c000ac2_886x608.png)
<br>
<br>
#### 尺寸测量与取色
<br>
![](https://box.kancloud.cn/12c6f902e48818aabb9f0bd68b941cef_796x298.png)
![](https://box.kancloud.cn/4a942a7de60e029c1946be79f918b998_416x291.png)
![](https://box.kancloud.cn/8f1fab67ba1e32475ad3d6552da102f9_699x422.png)
<br>
<br>
## 浏览器
* chrome(前端的主力浏览器)
* F12可以打开开发者工具
* safari 苹果电脑或者苹果手机的默认浏览器
* firefox 火狐
* IE(非标准)
网景公司
chrome和safari有同一个祖宗,叫webkit内核
<br>
## 编辑器
* WebStorm
* 大型项目 强大
* HBuilder 国产
* Visual Studio Code(VSCode)
* WebStorm的能力*90%,但是很轻巧,速度很快,中小型项目绰绰有余
<br>
## VSCode插件快速安装法
#### 插件安装
在我共享的开发工具里面找到vscode插件文件夹
把里面的extensions文件夹
覆盖到
C:\Users\你电脑账户\\.vscode
<br>
#### 配置
在我共享的开发工具里面找到vscode插件文件夹
把我里面的User文件夹
覆盖到
C:\Users\你电脑账户\AppData\Roaming\Code
<br>
## VSCode教程
<br>
<br>
- 01-青铜-HTML5+CSS3网页开发
- 01-代码初识
- 01-前端开发工程师
- 02-前端开发环境与软件
- 03-什么是语言
- 04-页面结构
- 05-常用标签
- 06-样式表
- 07-常见样式与选择器
- 01-高宽+边框
- 02-练习
- 03-背景
- 04-练习
- 05-文字与文本
- 06-选择器
- 07-练习
- 08-标签类型
- 09-盒子模型
- 01-内边距
- 02-计算方法
- 03-外边距
- 04-盒子模型计算方式切换
- 05-overflow
- 06-练习
- 10-超链接
- 11-练习
- 02-css基础2
- 01-选择器优先级
- 02-标签样式初始化
- 03-一个标签多个类
- 04-指针样式
- 05-编码规范
- 06-练习
- 03-浮动
- 01-练习
- 04-定位
- 01-练习
- 05-其他样式
- 01-透明与隐藏
- 02-其他
- 03-练习
- 06-表格与表单
- 01-表格
- 02-表单
- 07-PC端整站开发
- 08-移动端开发与适配
- 09-响应式
- 10-git
- 01-html+css(做页面)
- 前端打怪之路