您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

上下栏布局简介

顾名思义,上下栏就是上面栏,下面栏,中区域填满剩余空间。上下的矩形高度较小,通常固定在屏幕上,不会随着滑动手机而进行任何的移动。

如果同学们学会了上一章的吕型布局,那么这一章简直就是手到擒来,唯一和上一章有点区别的就是下面多了固定栏。

抽象版上下栏布局是这样的:

不会随着滚动屏幕的操作而进行移动:

除了上面几种方式实现上下栏布局外,为了交互,我们还可能会把上下栏布局做成随着屏幕的滑动而渐隐渐现的这么一种:

一方面我们可以利用现有的CSS库: 来实现上下栏布局:

这种方式不仅利于我们的学习,更加有助于我们的记忆。

然后也会带领大家如何在不依赖于任何外界条件的情况下纯手工实现上下栏布局:

作为扩展阅读,我们还提供了交互更加充满趣味性的渐隐渐现:

不过由于渐隐渐现必须用 JS 才能到的滚动距离,所以最后这一小节只作为扩展阅读,防止没有 JS 基础的小伙伴看了懵圈。

下一小节我们就来讲讲如何用去实现上下栏布局。


联系我
置顶