前端工具推荐 PxCook

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相关推荐

Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
小程序高级电商前端第1周走进Web全栈工程师一----小程序注册、开发工具推荐、《风袖》首页布局详尽分析、Webstorm开发小程序必配配置、mock数据...
接下来开启一门全新的课程的学习,其实这是去年6月份所记录的,只是木有公开,然后到目前为止已经间隔了快1年没管了,基本上是已经快放弃的节奏,但是呢它又是我一直特别想学习的,所以决定公开,鞭策自己得继续前 ...
WEB网页设计前端(前台)开发的常用工具推荐
WEB网页设计前端(前台)开发的常用工具推荐最近我在搞网页设计,包括网站建设的前台界面设计和JS代码的编写,弄一个JS的时候把我给郁闷了,在寻找JS如何通过子节点操作父节点的时候找到了以下免费的网站 ...
前端利器，6 款开源 Web 性能优化辅助工具推荐
转自:原文链接 Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分.当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验. 下面推荐几款 Web 性能优化辅助工具推荐 ...
etcd 笔记（02）— etcd 安装（apt 或 yum 安装、二进制包安装、Docker 安装 etcd、etcd 前端工具etcdkeeper）
1. 使用 apt 或 yum 安装 etcd 命令如下: sudo apt-get install etcd 或者 sudo yum install etcd 这样安装的缺点是:安装的 etcd 版 ...
python视频课程推荐-听说程序员都在用，5款Python开发工具推荐
很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头.后来工作中深刻体会到,合理使用开发的工具的便利和高效.今天,我就把Python程序员使用 ...
学python用什么软件开发-5款Python程序员高频使用开发工具推荐
很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头.后来工作中深刻体会到,合理使用开发的工具的便利和高效.今天,我就把Python程序员使用 ...
python编程工具p-5款Python程序员高频使用开发工具推荐
很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头.后来工作中深刻体会到,合理使用开发的工具的便利和高效.今天,我就把Python程序员使用 ...
python程序员编辑器_5款Python程序员高频使用开发工具推荐
很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头.后来工作中深刻体会到,合理使用开发的工具的便利和高效.今天,我就把Python程序员使用 ...

前端工具推荐 PxCook

1、PxCook介绍

2、PxCook的下载安装

3、PxCook的基本使用

注：

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

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

前端工具推荐 PxCook相关推荐

最新文章

热门文章

前端工具推荐 PxCook

1、PxCook介绍

2、PxCook的下载安装

3、PxCook的基本使用

注：

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

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

前端工具推荐 PxCook相关推荐

最新文章

热门文章

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