本文分三部分講解：

效果圖與頁面的差異：主要講解頁面與效果圖不同的細(xì)微之處

Css3新特性：分兩部分，新特性和實(shí)例部分

設(shè)計(jì)與構(gòu)建：構(gòu)建的趨勢與現(xiàn)狀

1.效果圖與頁面的差異：

1）內(nèi)核小常識(shí)分享

主流內(nèi)核：

Trident內(nèi)核：IE，MaxThon，TT，The World，360，搜狗瀏覽器等

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F，MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上

Webkit內(nèi)核：Safari，Chrome等

1 Trident內(nèi)核和W3C標(biāo)準(zhǔn)脫節(jié)，Trident內(nèi)核的大量Bug等安全問題沒有得到解決。

2 Gecko：這是Firefox 和 Flock

所采用內(nèi)核，這個(gè)內(nèi)核的優(yōu)點(diǎn)就是功能強(qiáng)大、豐富，可以支持很多復(fù)雜網(wǎng)頁效果和瀏覽器擴(kuò)展接口，但是代價(jià)是也顯而易見就是要消耗很多的資源，比如內(nèi)存。

3 Presto：Opera 采用的是 Presto內(nèi)核，Presto內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁速度最快的內(nèi)核，這得益于它在開發(fā)時(shí)的天生優(yōu)勢，在處理JS腳本等腳本語言時(shí)，會(huì)比其他的內(nèi)核快3倍左右，缺點(diǎn)就是為了達(dá)到很快的速度而丟掉了一部分網(wǎng)頁兼容性。

4 Webkit：Webkit 是 Safari 采用的內(nèi)核，不過 Safari 是蘋果系統(tǒng)下的瀏覽器（雖然也有windows版，但是比較少），所以只簡單介紹一下這個(gè)內(nèi)核的優(yōu)點(diǎn)和缺點(diǎn)，優(yōu)點(diǎn)就是網(wǎng)頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident，缺點(diǎn)是對于網(wǎng)頁代碼的容錯(cuò)性不高，也就是說對網(wǎng)頁代碼的兼容性較低，會(huì)使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正確顯示。

5 雙核現(xiàn)在很多國內(nèi)瀏覽器采用雙核（IE+ Webkit），如遨游，360等

總結(jié)：根據(jù)上述內(nèi)核不同，造成了頁面與效果圖的差異，這是其中一個(gè)原因。下面我們看下效果圖與頁面差異性的簡單處理方法。

2）效果圖與頁面之間差異處理

1 引導(dǎo)層你為何有毛邊呢

左圖為：IE7 8 9 10 及火狐谷歌瀏覽器的輸出的透明圖片，右圖為IE6的透明圖

造成毛邊我們采用的方法：

方法一：除IE6外采用PNG24位圖，給IE6做張GIF圖 或者PNG8的，這樣處理不足之處是保證了其它瀏覽器，但是IE6有點(diǎn)毛邊

方法二：我們采用IE6做濾鏡用一張PNG24的，其它瀏覽器也是PNG24，這樣處理的好處是沒有毛邊但是濾鏡是很消內(nèi)存的，一般不采用

方法三：在效果圖上做點(diǎn)簡單的改變?nèi)鐖D：

左圖是IE6右圖是其它瀏覽器，加個(gè)底圖透明，毛邊問題就被隱藏起來了，肉眼很難區(qū)分

2 圖標(biāo)擺放小竅門

左圖是原圖對比調(diào)整后的圖，做了簡單的調(diào)整，看第一個(gè)圖標(biāo)（手機(jī)），如果不用紅框框出來，很難辨別，

在不影響效果的情況下，我們做出了簡單的改變，把圖標(biāo)向左移動(dòng)了兩像素，這樣就用一套代碼，不用再單獨(dú)給那兩像素定義樣式了，圖標(biāo)達(dá)到居中的效果。

3 間距柵格化

看上圖，間距有30px 18px 16px 13px

我們在做間距截圖時(shí)，我們通常采用10px 15px 20px 25px 30px這樣的規(guī)律來處理間距，達(dá)到一定的規(guī)范性，但又不影響效果

4虛線 項(xiàng)目符號(hào)

上面是設(shè)計(jì)出來的，下面是系統(tǒng)自帶的，但是我們一般采用下面的，能用代碼寫出來就用代碼，原因是文件小而靈活，比如：一張圖一般幾十k，但是代碼的話，也許就幾k。靈活性的體現(xiàn)：比如能很快的把虛線變成實(shí)線

不是特別強(qiáng)調(diào)效果時(shí)，我們也可以這么做，如上面關(guān)閉這段代碼，很靈活，可以隨時(shí)放大、縮小、換色等。

標(biāo)簽： Trident內(nèi)核 Gecko內(nèi)核 Presto內(nèi)核 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。