1、PxCook介紹

PxCook(像素大廚) 適合于根據UI提供的網頁設計圖來書寫前端網頁代碼的時候

其優勢在于小巧、操作簡單，頁面簡潔，可以知道設計圖中各個元素的尺寸、顏色、其中字體大小顏色和與其他元素的距離，同時選中元素后會展示相關書寫網頁代碼所需的元素信息以及對應的css樣式，當然最讓人開心的是可以免費使用

在不知道該軟件前我是用的ps來對設計圖進行相關元素信息的獲取，但是知道該軟件后果斷使用PxCook

PS相對于PxCook功能更強大，但PS占用空間大和需要付費，在有網頁設計圖的情況下，PxCook足夠可以讓我們來書寫前端代碼~~~

2、PxCook的下載安裝

• 下載地址：PxCook - 高效易用的自動標注工具,生成前端代碼,設計研發協作利器 (fancynode.com.cn)

• 點擊立即下載

• 打開瀏覽器上的下載按鈕，在下載完成后，點擊文件圖標（如果可以找到自己瀏覽器下載的位置可以省略這步）

• 找到該圖標，雙擊打開

• 若出現“你要允許此應用對你的設備進行更改嗎”選擇 是 ，沒有出現請忽略這步

• 出現下圖 ，點擊 下一步

• 點擊 我同意此協議 后，點擊 下一步

• 再次點擊下一步

• 點擊 安裝

• 點擊 完成 后，完成安裝

3、PxCook的基本使用

• 雙擊打開桌面上的PxCook圖標啟動

• 點擊右上角的創建項目，在出現的創建項目框中輸入項目名稱并選擇Web，然后點擊創建項目

將.jpg或者.png或者.psd圖拖入紅色框區域

• 雙擊打開設計圖

• 有設計和開發兩個模式，.psd圖多用于開發模式，選中元素后會展示該元素相關信息，包括大小、顏色和其中字體等等（右邊框可見），選中元素后將鼠標移到其他元素上可以看到兩元素之間的距離

• .png或者.jpg圖多用于設計模式。紅色標注的尺子和吸管常用，吸管用于識別圖片顏色，點擊吸管工具后，點擊想要識別圖片中的部分即可；尺子工具點擊該工具后，點擊圖片上的某一位置按住鼠標，移動位置即可確定兩位置之間的距離

• 使用結束后點擊關閉，選擇是否保存即可

注：

對圖片進行移動時要按住空格鍵再點擊鼠標左鍵進行移動，只點擊鼠標左鍵或者滾動鼠標都不會使圖片移動

快捷鍵 一起按住 ”ctrl“和 ”+“放大圖片 一起按住”ctrl“和”-“ 縮小圖片

總結

以上是生活随笔為你收集整理的前端工具推荐 PxCook的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。