什么是切圖？就是將ui效果圖轉(zhuǎn)換成html頁面的過程。
常用工具：
切圖：photoshop...
編輯器：webstorm（或者sublime）...
壓縮工具：tinypng（壓縮圖片）...
一般步驟：
拿到一張UI稿，首先判斷這是一張PC端的還是移動端的；如果是PC端的，是否必須滿足響應(yīng)式，如果是移動端的，是按640還是750切圖...
此處我們以移動端750為例：以一下這種圖片為例
1.首先我們看到此圖分為兩個部分header與content
首先我們先從頭部開始，標(biāo)題居中，返回按鈕居左，這種排版我們以定位的方式方式來實現(xiàn)：
<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.內(nèi)容區(qū)content
內(nèi)容區(qū)為一橫行排列下來，我們可以用<ul><li></li></ul>,當(dāng)然也可以用<div><div></div></div>
此處我們以第一種為例，再來觀察psd，每個li又分成了3個部分，圖片去，信息區(qū)，操作區(qū)，當(dāng)然也可以按照2個部分，圖片區(qū)，信息區(qū)+操作區(qū)
此處我們按照2個部分為例
<ul><li>
<div class="list-img"></div>
<p>楊洋</p>
<p>簽名簽名簽名簽名簽名簽名<p>
<span>粉絲</span><span>100</span><span>關(guān)注</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、代碼規(guī)范：
4個空格縮進；各個模塊注釋清晰；
css放在頭部引入，JavaScript在尾部引入；
盡量避免在html標(biāo)簽中寫style樣式
2、命名規(guī)范：
文件命名：以中劃線連接或者駝峰式均可，如group-detail.html groupDetail.html
class命名：以中劃線連接，如.item-img，盡量簡潔，盡量不使用與業(yè)務(wù)相關(guān)的命名，方便復(fù)用
使用兩個中劃線表示特殊化，如item-img–small?表示在.item-img的基礎(chǔ)上特殊化
狀態(tài)類直接使用單詞，如.active， .checked，.disabled
圖標(biāo)以icon-為前綴（字體圖標(biāo)采用.icon-font .i-name方式命名）
模塊采用關(guān)鍵詞命名，如.slide，.modal，.tips， .tabs
方法命名：駝峰式，如：getUserInfo
3、圖片處理：
合并小圖片，使用雪碧圖或者使用IconFont；
選擇合適格式和大小的圖片，做到壓縮；
