本文作者:sukai

编程垃圾桶(垃圾桶道具制作)

sukai 03-12 105

  发现很多大型网站都很喜欢用这种抽屉式的banner图,所以今天就写了一个爱新鲜的抽屉式banner图分享给大家。

  知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。

  ps.因为代码发出不方便阅读,所以就只截图发源码思路了。完整的源码及思路,可以加web前端交流学习群611256580(资料+源码+视频)

  html布局:

  1.HTML结构 用标签去表示这样一个结构

  2.先从大的方向去分析页面结构

  3.找到这个属性的归属者(标签)

  4.定义这个区域的结构

  5.定义这个盒子的宽高(固定 , 自适应 ,百分比)

  6.因为margin padding会影响到盒子与盒子 内容与边框之间的位置关系3

  7.确认盒子位置(内外边距 定位 浮动)

  8.要确认盒子内部的内容

  9.怎么把盒子叠到一块,实际上是改变这些盒子的位置

  10.找到改变位置的盒子给绝对定位 这个盒子的参照物是谁

  css样式:

编程垃圾桶(垃圾桶道具制作)

  java

  ps.大家觉得还有什么样的方式可以编写抽屉式banner呢?可以在评论里说出来。

阅读
分享