课程来源:https://www.imooc.com/learn/668

一:读设计稿

划分:头部、尾部、公共部分、大概分多少块、logo的重用、列表有哪些、各部分用什么技术实现等等。

二:建立项目目录

三:编写重置样式

不同的标签有着默认的样式,不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果。

网上有许多现成的重置样式表,可以直接借鉴使用。例如:

html { -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;height: 100%; } body { margin: 0;font-size: 14px;font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;line-height: 1.5;color: #333;background-color: #fff;min-height: 100%;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none;height: 0; } progress { vertical-align: baseline; } [hidden], template { display: none; } a {background: transparent;text-decoration: none;color: #08c;} a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} sup { top: -0.5em; } sub { bottom: -0.25em; } img { max-width: 100%;border: 0;vertical-align: middle;} svg:not(:root) { overflow: hidden; } pre { overflow: auto;white-space: pre;white-space: pre-wrap;word-wrap: break-word;} code, kbd, pre, samp { font-family: monospace, monospace;font-size: 1em; } button, input, optgroup, select, textarea { color: inherit;font: inherit;margin: 0;vertical-align: middle; } button, input, select { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button;cursor: pointer; } [disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0;padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box;padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }input[type="search"] { -webkit-appearance: textfield;box-sizing: border-box; }input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }fieldset { border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em; } legend { border: 0;padding: 0; } textarea { overflow: auto;resize: vertical;vertical-align: top; } optgroup { font-weight: bold; } input, select, textarea { outline: 0; } textarea, input { -webkit-user-modify: read-write-plaintext-only; } input::-ms-clear, input::-ms-reveal { display: none; } input::-moz-placeholder, textarea::-moz-placeholder { color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #999; } .placeholder { color: #999; } table { border-collapse: collapse;border-spacing: 0; } td, th { padding: 0; } h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; } ul, ol, li, dl, dd { margin: 0; padding: 0; } ul, ol {list-style: none outside none; } h1, h2, h3 { line-height: 2;font-weight: normal; } h1 { font-size: 18px; } h2 { font-size: 16px; } h3 { font-size: 14px; } i { font-style: normal; } * { box-sizing: border-box; } .clearfix::before, .clearfix::after { content: "";display: table; } .clearfix::after { clear: both; }

附:常见知名网站重制样式表:https://www.cnblogs.com/staven/p/4818459.html

三:编写页面整体布局框架

使用h5标签或div,搭建起页面的头部、尾部、公共部分等等大的块组成。

Tips:尽量少用id,多用class来区分元素;

class属性值命名注意语义化、范围化,一眼看到就知道:是哪里、什么元素,单词用中划线分割。

四:获取设计图元素的信息

1)PS中按F8呼出“信息”面板,设置度量单位为像素

2)使用“矩形选取工具”,在psd设计稿上进行测量宽高、间距、行高等

3)选取颜色:鼠标悬停在需要选取颜色处,信息面板即可看见RGB值

五:开始逐个部分进行切图

1)细化div

针对各个部分,使用更细致的布局进行搭建。

2)使用html标签+css样式搭建页面

根据设计图效果,选取最恰当的标签、css样式来实现

转载于:https://www.cnblogs.com/ygj0930/p/9501231.html

前端切图实战(PSD设计稿转化为前端)相关推荐

  1. 【工具】推荐一款切图神器,设计稿一键导出 Vue/微信小程序 代码

    2021 年过一半了,各位切图还开心吗? 最近我遇到这个事情: emmm,这位产品小兄弟,说好只加 3 个页面,最后硬是让产品加了 6 个页面,差点凑齐七个小矮人了,后面的 UI 稿就像这样(考虑到公 ...

  2. psd文件转响应式html5,前端切图【PSD转静态页】响应式切图 html5+css3

    一.服务流程 1.你们提供psd效果图,我们根据你们提供的效果图开发一整套前端代码: 2.我们会根据你们的效果图评估整个开发制作周期和费用: 3.确定价格后下单进行托管: 4.我们这边及时安排人员制作 ...

  3. 5款前端切图工具大比拼:谁是最强切图神器

    前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...

  4. 在线ps html源码,PSD to HTML5 - 专业前端切图(PSDoHTML.com)

    + 核心服务 将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...

  5. html5 图,PSD to HTML5 - 专业前端切图(PSDoHTML.com)

    + 核心服务 将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...

  6. 前端切图神器avocode

    前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...

  7. 介绍一个前端切图神器avocode

    2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...

  8. CodeFun-UI 设计稿智能生成前端源代码

    现在市场对前端开发工程师的要求越来越高,前端还原设计稿已经是最基本且不可避免的力气活了.在前端领域,想提升,就需要不断的学习.但是学习的时间哪里来呢?提高工作效率是正解,让你的24小时更有意义. Co ...

  9. android 系统的切图方式_UI设计切图规范

    移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度.设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力 ...

  10. 前端切图之svg图标的复用基于defs和use 亲测有用

    切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...

最新文章

  1. java中使用队列:java.util.Queue
  2. php用Simple Excel导出xls
  3. C++开发中的pImpl方法
  4. 满足其中一个条件则可_农村分户好处多,但并非人人都可分户!满足这4个条件才可以申请...
  5. laravel 集成采集_新版2020 Laravel采集网站程序
  6. 基于IDEA的JavaWeb开发环境搭建
  7. 拖拽批量上传图片如何保证 顺序_新手指南︱shopee店铺上架产品该如何操作?...
  8. jQuery-4.动画篇---动画基础隐藏和显示
  9. 内联函数的常识性问题
  10. Altium Designer 学习笔记
  11. Las Vegas利用ParkPad(基于ArcPad)实现公园资产管理
  12. win10 如何做到 C盘 的绝对干净,所有软件都安装到D盘,C盘只用来存操作系统。
  13. java 长方形正方形_面向对象的疑惑,java设计正方形,长方形
  14. 考研 计算机 跨专业,考研跨专业计算机 你需要满足这些条件
  15. 洋洋背古诗——寒假版
  16. 什么app可以绘制路线图_为什么大多数路线图都会不可避免地带来糟糕的结果
  17. 独家可用发卡小程序源码下载卡密系统
  18. 在浏览器中嵌入播放器
  19. [Solved] Pycharm 提示Unresolved reference
  20. create Golang project with interface #1

热门文章

  1. JVM -- JVM内存结构:程序计数器、虚拟机栈、本地方法栈、堆、方法区(二)
  2. 智能车心得分享(五)-- 电磁排布
  3. kepware怎么读modbus/tcp数据_DDR3读写数据调试
  4. Android手机“核心科技”---Vibrator(马达)驱动分析
  5. 如何看待加多宝与王老吉商标案发回重审?
  6. linux录制声卡声音_linux下ALSA声卡 录音问题
  7. 水平线标记的用法和属性
  8. SNF快速开发平台MVC-集成了百度开源项目echars
  9. 清理winsxs的小工具
  10. mapgis明码文件转为点线面文件_MapGIS明码文件的获得和在坐标转化中的应用研究(2)...