web前端经典教程之复用布局

讲解互联网大型专题活动页面重构的技巧，构建可复用的html模版，方便后期修改和维护。

企业经常会策划一些营销活动来刺激销售，不管是电商、旅游还是游戏类公司，一个大活动除了主会场，往往还包含好几个分会场，这样才能显得隆重而盛大，让用户产生一种有促销的错觉，借此以促进销售。对设计来说，尽可能的减少工作量的方法，就是通过配色和局部修改元素来完成分会场的设计；对开发或者重构人员来说，要想节约开发时间，就是要透过这些表象的本质，看到分会场之间的共性，尽可能用最简洁的代码，构建出最容易拓展和复用的模版。

 

我们拿途牛旅游网的一个活动来说，在重构下面分会场的过程中，能还原出设计稿只是最起码的要求，但是用更少的时间重构出来，并且能更方便的完成后期维护，才是衡量一个重构水平的标准。代码易维护的一个方面就是让改动的地方变少，要达到这样的效果，布局上就不得不讲究。

 

 

其实Web前端和AfterEffects之间的一些原理有些类似，在AE中，如果要给一个固态层设置绕X轴旋转，则需要先开启3D图层开关；在html中，则需要给css样式先设置一个叫做“perspective"的属性，旋转才有效，不能把perspective和rotate调换顺序。如果加在元素本身上，就可以达到正交投影视图效果；如果是加在父级元素上，使用的就是透视投影视图，perspective(800px)，表示相机距离屏幕位置为800px。默认相机对准父元素的中心。

 

 

另外，为了便于理解css3动画里面的绕X轴旋转,  录了个gif动画，其中红色的箭头表示X轴，绿色的是Y轴，蓝色的是Z轴，AE中中移动中心点用窗口中的工具就好，而css里面则需要设置transform-origin的值才可以达到效果，记得写全兼容性。

 

本篇就只需通过观看图片名称、宽度以及进行简单的除2运算，就可以迅速拓展出其他分会场了，这样既不用重新写代码，又不用频繁在软件之间切换，而且后期修改也方便，可以说是极大的减少了开发成本。

 

 

 

      相信通过本节课的学习，你会对重构有进一步的了解，对Web前端和影视后期之间也会产生一些联系，Adobe软件更像是给一些代码属性设置了一套皮肤，你不需要手写代码width：200px，只需要在宽度那里填上具体数值就好，如宽：200px; Dreamweaver就是这样帮助设计师的，不过只要了解css属性后，反而会觉得这种方便是一种限制，所以提倡手写代码。

 

附高清实操视频：https://v.qq.com/x/page/e07423e7518.html