header_v1.7.40

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

87天前发布

原创文章 / 网页 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

讲解互联网大型专题活动页面重构的技巧,构建可复用的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属性后,反而会觉得这种方便是一种限制,所以提倡手写代码。



好了,奉上本期高清解说视频,我就是你们未来必将熟悉的鬼谷魂。

如果觉得我能够对你有所启发,可以关注我在站酷的更多课程和微信公众号……^-^


0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功