将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:45px;

height:45px;

}

2.内容区content

内容区为一横行排列下来，我们可以用

,当然也可以用

此处我们以第一种为例，再来观察psd，每个li又分成了3个部分，图片去，信息区，操作区，当然也可以按照2个部分，图片区，信息区+操作区

此处我们按照2个部分为例

• 杨洋

  签名签名签名签名签名签名

  粉丝100关注200

大致样式：

.list{

background-color: #fff;

width: 100%;

}

.list>li {

position: relative;

margin-left: 15px;

display: -webkit-box;

}

.list-img{

width: 40px;

height: 40px;

margin:10px 10px 10px 0;

background:url(../img/bg.png);

border-radius:100%;

}

.list-info{

-webkit-box-flex: 1;

padding-top: 10px;

padding-bottom: 10px;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-pack: center;

padding-right: 15px;

}

.attention{

position:absolute;

right:15px;

height:30px;

line-height:30px;

text-align:center;

color:#fff;

background:#ff4e00;

border-radius:4px;

-webkit-border-radius:4px;

-moz-border-radius:4px;

}

除了这种方式，还有按百分比来写，这里不做阐述

注意点：

1、代码规范：

4个空格缩进；各个模块注释清晰；

css放在头部引入，JavaScript在尾部引入；

尽量避免在html标签中写style样式

2、命名规范：

文件命名：以中划线连接或者驼峰式均可，如group-detail.html groupDetail.html

class命名：以中划线连接，如.item-img，尽量简洁，尽量不使用与业务相关的命名，方便复用

使用两个中划线表示特殊化，如item-img–small 表示在.item-img的基础上特殊化

状态类直接使用单词，如.active， .checked，.disabled

图标以icon-为前缀（字体图标采用.icon-font .i-name方式命名）

模块采用关键词命名，如.slide，.modal，.tips， .tabs

方法命名：驼峰式，如：getUserInfo

3、图片处理：

合并小图片，使用雪碧图或者使用IconFont；

选择合适格式和大小的图片，做到压缩；