1、PxCook介紹

PxCook(像素大廚) 適合于根據(jù)UI提供的網(wǎng)頁(yè)設(shè)計(jì)圖來(lái)書寫前端網(wǎng)頁(yè)代碼的時(shí)候

其優(yōu)勢(shì)在于小巧、操作簡(jiǎn)單，頁(yè)面簡(jiǎn)潔，可以知道設(shè)計(jì)圖中各個(gè)元素的尺寸、顏色、其中字體大小顏色和與其他元素的距離，同時(shí)選中元素后會(huì)展示相關(guān)書寫網(wǎng)頁(yè)代碼所需的元素信息以及對(duì)應(yīng)的css樣式，當(dāng)然最讓人開心的是可以免費(fèi)使用

在不知道該軟件前我是用的ps來(lái)對(duì)設(shè)計(jì)圖進(jìn)行相關(guān)元素信息的獲取，但是知道該軟件后果斷使用PxCook

PS相對(duì)于PxCook功能更強(qiáng)大，但PS占用空間大和需要付費(fèi)，在有網(wǎng)頁(yè)設(shè)計(jì)圖的情況下，PxCook足夠可以讓我們來(lái)書寫前端代碼~~~

2、PxCook的下載安裝

• 下載地址：PxCook - 高效易用的自動(dòng)標(biāo)注工具,生成前端代碼,設(shè)計(jì)研發(fā)協(xié)作利器 (fancynode.com.cn)

• 點(diǎn)擊立即下載

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

• 找到該圖標(biāo)，雙擊打開

• 若出現(xiàn)“你要允許此應(yīng)用對(duì)你的設(shè)備進(jìn)行更改嗎”選擇 是 ，沒(méi)有出現(xiàn)請(qǐng)忽略這步

• 出現(xiàn)下圖 ，點(diǎn)擊 下一步

• 點(diǎn)擊 我同意此協(xié)議 后，點(diǎn)擊 下一步

• 再次點(diǎn)擊下一步

• 點(diǎn)擊 安裝

• 點(diǎn)擊 完成 后，完成安裝

3、PxCook的基本使用

• 雙擊打開桌面上的PxCook圖標(biāo)啟動(dòng)

• 點(diǎn)擊右上角的創(chuàng)建項(xiàng)目，在出現(xiàn)的創(chuàng)建項(xiàng)目框中輸入項(xiàng)目名稱并選擇Web，然后點(diǎn)擊創(chuàng)建項(xiàng)目

將.jpg或者.png或者.psd圖拖入紅色框區(qū)域

• 雙擊打開設(shè)計(jì)圖

• 有設(shè)計(jì)和開發(fā)兩個(gè)模式，.psd圖多用于開發(fā)模式，選中元素后會(huì)展示該元素相關(guān)信息，包括大小、顏色和其中字體等等（右邊框可見(jiàn)），選中元素后將鼠標(biāo)移到其他元素上可以看到兩元素之間的距離

• .png或者.jpg圖多用于設(shè)計(jì)模式。紅色標(biāo)注的尺子和吸管常用，吸管用于識(shí)別圖片顏色，點(diǎn)擊吸管工具后，點(diǎn)擊想要識(shí)別圖片中的部分即可；尺子工具點(diǎn)擊該工具后，點(diǎn)擊圖片上的某一位置按住鼠標(biāo)，移動(dòng)位置即可確定兩位置之間的距離

• 使用結(jié)束后點(diǎn)擊關(guān)閉，選擇是否保存即可

注：

對(duì)圖片進(jìn)行移動(dòng)時(shí)要按住空格鍵再點(diǎn)擊鼠標(biāo)左鍵進(jìn)行移動(dòng)，只點(diǎn)擊鼠標(biāo)左鍵或者滾動(dòng)鼠標(biāo)都不會(huì)使圖片移動(dòng)

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。