02-前端開發環境與軟件 · 前端入門

## 設計圖 #### 切圖用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) 就是這樣慢慢的把所有的圖標都拖到新窗口 ![](https://box.kancloud.cn/5b386b71b7d1f9da6289c6b68c000ac2_886x608.png) #### 尺寸測量與取色 ![](https://box.kancloud.cn/12c6f902e48818aabb9f0bd68b941cef_796x298.png) ![](https://box.kancloud.cn/4a942a7de60e029c1946be79f918b998_416x291.png) ![](https://box.kancloud.cn/8f1fab67ba1e32475ad3d6552da102f9_699x422.png) ## 瀏覽器 * chrome(前端的主力瀏覽器) * F12可以打開開發者工具 * safari 蘋果電腦或者蘋果手機的默認瀏覽器 * firefox 火狐 * IE(非標準) 網景公司 chrome和safari有同一個祖宗，叫webkit內核 ## 編輯器 * WebStorm * 大型項目強大 * HBuilder 國產 * Visual Studio Code(VSCode) * WebStorm的能力*90%，但是很輕巧，速度很快，中小型項目綽綽有余 ## VSCode插件快速安裝法 #### 插件安裝在我共享的開發工具里面找到vscode插件文件夾把里面的extensions文件夾覆蓋到 C:\Users\你電腦賬戶\\.vscode #### 配置在我共享的開發工具里面找到vscode插件文件夾把我里面的User文件夾覆蓋到 C:\Users\你電腦賬戶\AppData\Roaming\Code ## VSCode教程