一、年輕的我 ? ? ?

? ? ? “無人不成商”，如果一個(gè)電子商務(wù)網(wǎng)站想要做起來，搞活動(dòng)時(shí)必不可少的（引入流量、提高用戶黏度、活躍網(wǎng)站氛圍），今天打折，明天送紅包。

? ? ??（立秋活動(dòng)，右）

? ? ? 作為一個(gè)前端，我當(dāng)然要從技術(shù)的角度來講一下活動(dòng)頁面怎么做，怎么做？剛到，天貓的時(shí)候第一個(gè)任務(wù)就是要做一個(gè)（關(guān)于立秋食材）的活動(dòng)頁面。由于，太年輕了，跟著我的前任，來到設(shè)計(jì)師妹紙的屏幕下晃了兩眼，嗯，不錯(cuò)，真漂亮，呵呵（可以意會(huì)）。言歸正傳，當(dāng)時(shí)覺得這個(gè)頁面挺簡單的啊，不就切個(gè)圖嘛，一兩天隨便玩嘛，還是太年輕。

? ? ? 前兩天我一點(diǎn)也不急，淡定中。直到大限將至，開始整了。前面，很是順利，框架幾下子就搭起來了，接著就切圖往里面填素材（要求每張圖片的大小不超過50k）。切著切著，覺著不對(duì)勁，ps玩過但沒有這么玩過，后果就是起來感覺不行，重切，不行，重切，下一張，不行，重切....最最麻煩的是頁頭（下面細(xì)訴難點(diǎn)），切了一天怎么都有空隙，不得不求教前輩了。不知不覺，時(shí)間就要到了，設(shè)計(jì)師，看了設(shè)計(jì)稿后，是這樣的......,好吧，你把要改的地方寫個(gè)文檔。后來，要放到線上的預(yù)發(fā)環(huán)境，我又發(fā)現(xiàn)了一個(gè)問題，就是圖片的本地鏈接要換成線上的，靠，這個(gè)不是坑爹嗎（幾十張圖啊）？我試著問了一些前輩，他們說沒有這樣的工具（實(shí)際上是有的，怪我問錯(cuò)人了）。好吧，于是我又自己隨手寫了一個(gè)圖片鏈接自動(dòng)替換的工具...后面的事不再細(xì)說，這就是成長的代價(jià)啊。（溝通不足，切在不了解環(huán)境的前提下盲目自信，還是太年輕啊）。

二、“我要打十個(gè)！”

? ? ? 后來，做了些活動(dòng)頁面，慢慢的有了些體會(huì)?？偨Y(jié)一下吧，

? ? ? 活動(dòng)頁面，往往量是非常大的，而且有很多個(gè)性化，據(jù)活動(dòng)組的同學(xué)說（一周可以達(dá)到上百個(gè)），“我要打十個(gè)！”是經(jīng)?；厥幵谒麄冎虚g的一句話。

? ? ? 活動(dòng)頁面涉及到幾個(gè)很重要的部分，構(gòu)圖、圖片、組件（包含模板）。

1、構(gòu)圖

? ? ? 當(dāng)你拿到一個(gè)psd，你怎么下手切圖？這就是構(gòu)圖的過程，可以通過拉出輔助線來幫助構(gòu)圖，在使用切片工具將大圖分隔為幾個(gè)劃定的小圖。我著重介紹最麻煩的頁頭切割，?

? ? ? 方式一，中分：

? ? ??

? ? ? 特點(diǎn)：布局比較容易，但是切圖時(shí)很難精確，（就算精確）兩個(gè)背景間也很難完全吻合，此時(shí)會(huì)有縫隙出現(xiàn)。解決這個(gè)問題需要在切割時(shí)，多切幾個(gè)像素。

? ? ? 方式二，水平：?

? ? ??

? ? ? ?特點(diǎn)：切圖簡單，但是布局相對(duì)復(fù)雜，需要的dom元素也較多。

? ? ? ?注：（這里存在兩種布局方式，將圖片作為背景，或者使用absolute，50%布局，或者對(duì)避免圖片間的空隙有很大作用。）

? ? ? ?布局：contianer{width:100%;backgorund:url center;}

? ? ? ? ? ? ? 或者 inner{pos:absolute;left:50%;margin-left:-(width/2)px;}

? ? ? ?當(dāng)然，還有更多其他的方式。?

3、圖片：?

? ? ? 1）、常用圖片格式，為gif，jpg，png（png8，png24）。對(duì)于活動(dòng)的背景圖，期色彩通常不會(huì)特別的艷麗，這種情況下使用gif將會(huì)有更好的效果，其質(zhì)量趨近于jpg的最高品質(zhì)，當(dāng)前大小卻相當(dāng)于jpg的中等品質(zhì)。 （中等品質(zhì)下圖片已經(jīng)模糊了）

? ? ?2）、使用web圖片格式（ps，ctrl+alt+s），同一種格式將擁有更小的圖片大小。?

? ? ?3）、透明

? ? ? ? ? ? ?在移動(dòng)端采用Png8來完成透明，質(zhì)量小，且支持良好。

? ? ? ? ? ? ?在PC端，除IE6外采用Png32來完成透明，IE6下則使用Png8，其次是Gif。?

三、組件、模板

? ? ? 組件、模板復(fù)用可以加快頁面開發(fā)速度，而活動(dòng)的個(gè)性化較低，重復(fù)度較高（固定導(dǎo)航，圖片熱區(qū)，tab切換，投票，分享），如果做好了組件和模板的沉淀，那么搭建頁面框架，添加功能就會(huì)非常的容易。