psd頁面切割成html技巧總結

時間 2019-12-10

標籤 psd 頁面切割 html 技巧總結欄目 HTML 简体版

原文原文鏈接

關鍵字：psd切割技巧生成html圖片要點 css樣式要點 remcss

與高手切割後的代碼對比學習提升（考察點：切割後的頁面質量，源碼大小及圖片大小，js技術，動畫技術，開發和命名規範等）html

1、psd切割技巧 ----------

雖然有firework工具切割，切割完就自動生成代碼．但要標準規範得本身修改，並且我相信自動生成會有不少冗餘和亂碼。要想學好和完全掌握製做html，仍是本身動手好。前端

只要勤加練習或者多作活，手寫css必然孰能生巧，必然製做出的html+css 代碼又少，維護又方便。寫代碼和練武功同樣，須要持續修煉，才能成爲高手。

html5

切割原則與技巧
1 div劃分顆粒大小適合，這樣該是總體圖片的就不要分開切割，不然製做又慢並且代碼K數多；很差控制的，該分開切就分開。
2 重複的圖片切成寬高20px的小圖，這樣有利於重複使用。
3 切割的原則仍是保證圖片質量，如今網速快+又有緩存。css3

2、生成圖片要點 ----------

首選考慮圖片質量，而後纔是哪一個格式文件小，就用哪一個。目前wifi和3G4G等網絡極速，頁面傳輸很是快，還有就是div不是以前的table加載慢。
jpg的通常損耗在60-80爲最佳，gif的你看128和256的損耗差異大不大，不大就選128的就能夠了，由於這樣導出的圖片小。
還有經常使用的就是png文件，這個能夠應用透明的特性。方便webapp透明層開發。
web

3、css樣式要點 ----------

div 中的圖片如何居中？
第1個方法：圖片放div中，div { margin:0px auto; }
第2個方法：text-align:center; 垂直居中，經過paddin-top來計算=（div的高度-圖片高度）/2
固然還有其餘方法。緩存

文字模塊怎麼製做合適？
每一行縮進：padding-left:2em
每一段縮進：text-indent:2em
可是如何控制，第一行不縮進，其他的都縮進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;app

/* 頭像:居中且是圓形，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;

4、關於分辨率，關於前端字體大小 ----------

移動端字體單位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 */}

5、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屬性的表象。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。