前端工具推荐 PxCook
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)題。
- 上一篇: Nginx应用域名访问限制不严格漏洞修复
- 下一篇: 挖到宝了,这2款浏览器工具多看小说自由,