大号在练葵花宝典 发表于 2024-9-5 16:25:29

前端工具推荐 PxCook

1、PxCook先容

PxCook(像素大厨) 适合于根据UI提供的网页设计图来书写前端网页代码的时候
其优势在于小巧、操作简朴，页面轻便，可以知道设计图中各个元素的尺寸、颜色、其中字体大小颜色和与其他元素的距离，同时选中元素后会展示相关书写网页代码所需的元素信息以及对应的css样式，当然最让人开心的是可以免费使用
在不知道该软件前我是用的ps来对设计图举行相关元素信息的获取，但是知道该软件后果断使用PxCook
PS相对于PxCook功能更强大，但PS占用空间大和需要付费，在有网页设计图的情况下，PxCook充足可以让我们来书写前端代码~~~
2、PxCook的下载安装



[*] 下载地址：PxCook - 高效易用的主动标注工具,生成前端代码,设计研发协作利器 (fancynode.com.cn)
            https://i-blog.csdnimg.cn/blog_migrate/3232b67ec5d85e08b692b63a6d35690f.png         

[*] 点击立即下载


[*] 打开欣赏器上的下载按钮，在下载完成后，点击文件图标（如果可以找到自己欣赏器下载的位置可以省略这步）
            https://i-blog.csdnimg.cn/blog_migrate/0312d449f83ca20976eedbff1664c16e.png         

[*] 找到该图标，双击打开
            https://i-blog.csdnimg.cn/blog_migrate/43c58def337c8bff6d22358229d4c7c5.png         

[*] 若出现“你要允许此应用对你的设备举行更改吗”选择 是 ，没有出现请忽略这步


[*] 出现下图 ，点击 下一步
            https://i-blog.csdnimg.cn/blog_migrate/e85d0ba971b2012ddace6a84ac7761ac.png         

[*] 点击 我同意此协议 后，点击 下一步
            https://i-blog.csdnimg.cn/blog_migrate/b2f0603c8c0bc38e5aad7708a80768e3.png         

[*] 再次点击下一步
            https://i-blog.csdnimg.cn/blog_migrate/1e8ead300ee7af69fdd704a7dd4ccdf9.png         

[*] 点击 安装
            https://i-blog.csdnimg.cn/blog_migrate/42a5ba7619ca2d2a4bccc2143c2d8541.png         

[*] 点击 完成 后，完成安装
            https://i-blog.csdnimg.cn/blog_migrate/63f155165912646b8eac6eb30a067b5c.png         3、PxCook的根本使用



[*] 双击打开桌面上的PxCook图标启动
            https://i-blog.csdnimg.cn/blog_migrate/5c30ef008d7ea4743a7968729375860e.png         

[*] 点击右上角的创建项目，在出现的创建项目框中输入项目名称并选择Web，然后点击创建项目
            https://i-blog.csdnimg.cn/blog_migrate/4d807ca91ae451fcf9fd8d20aaf816fa.png         将.jpg或者.png或者.psd图拖入赤色框地域
            https://i-blog.csdnimg.cn/blog_migrate/3709993210e22f3c838de6ed8acc0e8a.png         

[*] 双击打开设计图
            https://i-blog.csdnimg.cn/blog_migrate/d8bda972fc4097e0da8f4f92715a65a7.png         

[*] 有设计和开发两个模式，.psd图多用于开发模式，选中元素后会展示该元素相关信息，包罗大小、颜色和其中字体等等（右边框可见），选中元素后将鼠标移到其他元素上可以看到两元素之间的距离
            https://i-blog.csdnimg.cn/blog_migrate/cf332da5f8a2e642ea7b80b1e96ebfd1.png                     https://i-blog.csdnimg.cn/blog_migrate/0f385a71c29b9df04d9f2af99336f682.png         

[*] .png或者.jpg图多用于设计模式。赤色标注的尺子和吸管常用，吸管用于识别图片颜色，点击吸管工具后，点击想要识别图片中的部分即可；尺子工具点击该工具后，点击图片上的某一位置按住鼠标，移动位置即可确定两位置之间的距离
            https://i-blog.csdnimg.cn/blog_migrate/c246fd8bca7322daef573a4196dcd073.png                     https://i-blog.csdnimg.cn/blog_migrate/0addb012a0534a2e177bda21c7599dcd.png         

[*] 使用结束后点击关闭，选择是否生存即可
注：


[*] 对图片举行移动时要按住空格键再点击鼠标左键举行移动，只点击鼠标左键或者滚动鼠标都不会使图片移动

[*] 快捷键 一起按住 ”ctrl“和 ”+“放大图片 一起按住”ctrl“和”-“ 缩小图片

解决官网打不开的题目：
我自己之前下载的PxCook压缩包已放在文章顶部






免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 前端工具推荐 PxCook