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