什么是切图？就是将ui效果图转换成html页面的过程。
常用工具：
切图：photoshop...
编辑器：webstorm（或者sublime）...
压缩工具：tinypng（压缩图片）...
一般步骤：
拿到一张UI稿，首先判断这是一张PC端的还是移动端的；如果是PC端的，是否必须满足响应式，如果是移动端的，是按640还是750切图...
此处我们以移动端750为例：以一下这种图片为例
1.首先我们看到此图分为两个部分header与content
首先我们先从头部开始，标题居中，返回按钮居左，这种排版我们以定位的方式方式来实现：
<div class="header"><i class="icon"></i> <p>达人榜榜<p></div>
我们大致来写下样式
.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
内容区为一横行排列下来，我们可以用<ul><li></li></ul>,当然也可以用<div><div></div></div>
此处我们以第一种为例，再来观察psd，每个li又分成了3个部分，图片去，信息区，操作区，当然也可以按照2个部分，图片区，信息区+操作区
此处我们按照2个部分为例
<ul><li>
<div class="list-img"></div>
<p>杨洋</p>
<p>签名签名签名签名签名签名<p>
<span>粉丝</span><span>100</span><span>关注</span><span>200</span>
<div class="list-info"></div>
</li></ul>
大致样式：
.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；
选择合适格式和大小的图片，做到压缩；
