记：Tmall活动页面开发_html/css_WEB-ITnose

“无人不成商”，如果一个电子商务网站想要做起来，搞活动时必不可少的（引入流量、提高用户黏度、活跃网站氛围），今天打折，明天送红包。

（立秋活动，右）

作为一个前端，我当然要从技术的角度来讲一下活动页面怎么做，怎么做？刚到，天猫的时候第一个任务就是要做一个（关于立秋食材）的活动页面。由于，太年轻了，跟着我的前任，来到设计师妹纸的屏幕下晃了两眼，嗯，不错，真漂亮，呵呵（可以意会）。言归正传，当时觉得这个页面挺简单的啊，不就切个图嘛，一两天随便玩嘛，还是太年轻。

前两天我一点也不急，淡定中。直到大限将至，开始整了。前面，很是顺利，框架几下子就搭起来了，接着就切图往里面填素材（要求每张图片的大小不超过50k）。切着切着，觉着不对劲，ps玩过但没有这么玩过，后果就是起来感觉不行，重切，不行，重切，下一张，不行，重切....最最麻烦的是页头（下面细诉难点），切了一天怎么都有空隙，不得不求教前辈了。不知不觉，时间就要到了，设计师，看了设计稿后，是这样的......,好吧，你把要改的地方写个文档。后来，要放到线上的预发环境，我又发现了一个问题，就是图片的本地链接要换成线上的，靠，这个不是坑爹吗（几十张图啊）？我试着问了一些前辈，他们说没有这样的工具（实际上是有的，怪我问错人了）。好吧，于是我又自己随手写了一个图片链接自动替换的工具...后面的事不再细说，这就是成长的代价啊。（沟通不足，切在不了解环境的前提下盲目自信，还是太年轻啊）。

后来，做了些活动页面，慢慢的有了些体会。总结一下吧，

活动页面，往往量是非常大的，而且有很多个性化，据活动组的同学说（一周可以达到上百个），“我要打十个！”是经常回荡在他们中间的一句话。

活动页面涉及到几个很重要的部分，构图、图片、组件（包含模板）。

当你拿到一个psd，你怎么下手切图？这就是构图的过程，可以通过拉出辅助线来帮助构图，在使用切片工具将大图分隔为几个划定的小图。我着重介绍最麻烦的页头切割，

方式一，中分：

特点：布局比较容易，但是切图时很难精确，（就算精确）两个背景间也很难完全吻合，此时会有缝隙出现。解决这个问题需要在切割时，多切几个像素。

方式二，水平：

特点：切图简单，但是布局相对复杂，需要的dom元素也较多。

注：（这里存在两种布局方式，将图片作为背景，或者使用absolute，50%布局，或者对避免图片间的空隙有很大作用。）

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

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

当然，还有更多其他的方式。

1）、常用图片格式，为gif，jpg，png（png8，png24）。对于活动的背景图，期色彩通常不会特别的艳丽，这种情况下使用gif将会有更好的效果，其质量趋近于jpg的最高品质，当前大小却相当于jpg的中等品质。 （中等品质下图片已经模糊了）

2）、使用web图片格式（ps，ctrl+alt+s），同一种格式将拥有更小的图片大小。

3）、透明

在移动端采用Png8来完成透明，质量小，且支持良好。

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

组件、模板复用可以加快页面开发速度，而活动的个性化较低，重复度较高（固定导航，图片热区，tab切换，投票，分享），如果做好了组件和模板的沉淀，那么搭建页面框架，添加功能就会非常的容易。