psd页面切割成html技巧总结
關鍵字：psd切割技巧 生成html圖片要點 css樣式要點 rem
與高手切割后的代碼對比學習提高（考察點：切割后的頁面質量，源碼大小及圖片大小，js技術，動畫技術，開發和命名規范等）
一、psd切割技巧 ----------
雖然有firework工具切割，切割完就自動生成代碼．但要標準規范得自己修改，而且我相信自動生成會有很多冗余和亂碼。要想學好和徹底掌握制作html，還是自己動手好。
只要勤加練習或者多做活，手寫css必然孰能生巧，必然制作出的html+css 代碼又少，維護又方便。寫代碼和練武功一樣，需要持續修煉，才能成為高手。
切割原則與技巧
1 div劃分顆粒大小適合，這樣該是整體圖片的就不要分開切割，否則制作又慢而且代碼K數多；不好控制的，該分開切就分開。
2 重復的圖片切成寬高20px的小圖，這樣有利于重復使用。
3 切割的原則還是保證圖片質量，現在網速快+又有緩存。
二、生成圖片要點 ----------
首選考慮圖片質量，然后才是哪個格式文件小，就用哪個。目前wifi和3G4G等網絡極速，頁面傳輸非常快，還有就是div不是之前的table加載慢。
jpg的一般損耗在60-80為最佳，gif的你看128和256的損耗差別大不大，不大就選128的就可以了，因為這樣導出的圖片小。
還有常用的就是png文件，這個可以應用透明的特性。方便webapp透明層開發。
三、css樣式要點 ----------
div 中的圖片如何居中？
第1個方法：圖片放div中，div { margin:0px auto; }
第2個方法：text-align:center; 垂直居中，通過paddin-top來計算=（div的高度-圖片高度）/2
當然還有其他方法。
文字模塊怎么制作合適？
每一行縮進：padding-left:2em
每一段縮進：text-indent:2em
但是如何控制，第一行不縮進，其余的都縮進2個字符
格式如下：
1、我是第一行的文字
? ? ?要對齊的啊嘿嘿和
? ? ?對齊了
2、我是第二行的文字
? ? ?對齊的啊
上面這種情況，只能分開弄兩個div，把數字序號放div1 把文字放div2就對齊了。
html <radio>單選按鈕控件 和html5 的差別
css input checkbox和radio樣式美化 http://www.haorooms.com/post/css_mh_ck_radio
div 滾動條樣式 overflow:auto;overflow-y:scroll;
?
/* 頭像:居中且是圓形，radius 100%的應用非常妙 */
.headpic { position:absolute; top:0px; left:0px; width:100%; height:100%; border-radius:100%; overflow:hidden; background-size:100%; }
?
ul li中文字多換行后與下一li內容重疊怎么解決? padding-left:2em;
四、關于分辨率，關于前端字體大小 ----------
移動端字體單位font-size選擇px還是rem
1.對于只需要適配手機設備，使用px即可;
2.對于需要適配各種移動設備，使用rem; 例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備
關于邏輯分辨率、物理分辨率之間的關系可以參考：「像素」「渲染像素」以及「物理像素」是什么東西？它們有什么聯系？
前端開發之字體大小px，em，rem，pt 參考：http://blog.csdn.net/ttongzw/article/details/38040947
在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的了解rem。
rem是css3出現的新的字體大小定義方式，其與em的區別是rem總是相對于html的跟元素（html），不會相對父元素，如下：
html{
font-size:1em;
}
.div2{
font-size:2rem;
}
p{
font-size:1rem;
}
可以看到p元素的大小并不像em一樣和div2的一樣大，而是與html定義的1rem一樣大，為16px。
如果p元素的字體大小為百分比%話，即直接在父元素的基礎上乘以百分數，同px（即：如果設置百分比，都是相對父元素的）
CSS3的REM設置字體大小 http://www.w3cplus.com/css3/define-font-size-with-css3-rem
在使用“em”作單位時，一定需要知道其父元素的設置，因為“em”就是一個相對值，而且是一個相對于父元素的值，其真正的計算公式是：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
我們來看一個簡單的代碼實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算，如果沒有設置，將是以“16px”為基準 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。
再比如：
html { font-size:156.25%; /*25 ÷ 16 × 100% = 156.25%*/}
body { font-size:1.6rem; /*1.6 × 25px = 40px */}
?
五、html簡單動畫 ----------
?
利用H5特性和js技術實現頁面中動畫，后續：html5+js常用動畫總結 應該做個專題詳細研究。
頁面動畫實現辦法：動畫總共兩類，無非就是幀動畫（frame）和變形動畫（tween）
1 gif或flash動畫
2 js控制實現位移等動畫
3 css3樣式控制實現動畫
4 html5新特性實現動畫
左右動的小小示例：
$(function(){
//左右移動的動畫效果
var changeDivPosition = function(){
$('.a12 img').animate({'left': '1.5%'}, 600).animate({'left': '0%'}, 600);
};
changeDivPosition();
objSetInter = setInterval(changeDivPosition, 1500);
//微信邀請遮罩層
$('#btnShare').click(function(){
showInvite();
});
});
/* 樣式表：邀請透明層 */
//最底層半透明蒙板
.invite1 { position:fixed; top:0%; left:0%; width:100%; height:200%; background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0!important; filter:Alpha(opacity=80); background:#000000; z-index:1000; display:none; }
//響應點擊層
.invite2 { position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }
//點擊右上角
.invite21 { width:800px; height:600px; background-image:url('../img/user/invite.png'); }
.vpbg { background-repeat:no-repeat; background-position:center top; background-size:100%; }
//頁面調用
<div class="invite1"></div>
<div class="invite2"><div class="invite21 vpbg"></div></div>
</body>
</html>
<script>
var showInvite = function(){
$('.invite1').show();
$('.invite2').show();
};
$(function(){
$('.invite2').click(function(){
$('.invite1').hide();
$('.invite2').hide();
});
});
</script>
---------- ---------- ----------
block，inline和inline-block概念和區別
轉載自：http://www.cnblogs.com/KeithWang/p/3139517.html
總體概念
block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-level elements (塊級元素) 和 inline elements (內聯元素)。block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前后不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。
大體來說HTML元素各有其自身的布局級別（block元素還是inline元素）：
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般來說，可以通過display:inline和display:block的設置，改變元素的布局級別。
block，inline和inlinke-block細節對比
display:block
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
block元素可以設置margin和padding屬性。
display:inline
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補充說明
一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。
IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。
轉載于:https://www.cnblogs.com/wellsoho/p/5025567.html
總結
以上是生活随笔為你收集整理的psd页面切割成html技巧总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《C++标准程序库》笔记之二
- 下一篇： 用Backbone.js创建一个联系人管