如何把psd格式转为html,将psd转化为HTML网页详情讲解

什么是切图？就是将ui效果图转换成html页面的过程。

常用工具：

切图：photoshop...

编辑器：webstorm(或者sublime)...

压缩工具：tinypng(压缩图片)...

一般步骤：

拿到一张UI稿，首先判断这是一张PC端的还是移动端的；如果是PC端的，是否必须满足响应式，如果是移动端的，是按640还是750切图...

此处我们以移动端750为例：以一下这种图片为例

1.首先我们看到此图分为两个部分header与content

首先我们先从头部开始，标题居中，返回按钮居左，这种排版我们以定位的方式方式来实现：

达人榜榜

我们大致来写下样式

.header{

text-align:center;

width:100%;

height:45px;

line-height:45px;

background:#ff4e00;

color:#fff;

}

.header i{

position: absolute;

left:15px;

width:4