上下欄布局簡介

1. 前言

顧名思義，上下欄就是上面一個欄，下面一個欄，中間的區域填滿剩余空間。上下兩欄的矩形高度較小，通常固定在屏幕上，不會隨著用戶滑動手機而進行任何的移動。

如果同學們學會了上一章的呂型布局，那么這一章簡直就是手到擒來，唯一和上一章有點區別的就是下面多了一個固定欄。

2. 上下欄布局

抽象版上下欄布局是這樣的：

該種布局方式比呂形布局多了一行，上下兩行都是寬度充滿屏幕，高度固定。

不會隨著用戶滾動屏幕的操作而進行移動：

3. 漸隱漸現

除了上面幾種方式實現上下欄布局外，為了增加交互效果，我們還可能會把上下欄布局做成隨著屏幕的滑動而漸隱漸現的這么一種效果：

這種效果主要是通過了JS來獲取到屏幕的滾動距離，然后隨著距離的增加來動態控制透明度，增加了交互的趣味性。

4. 實現手段

一方面我們可以利用現有的CSS中文庫：chinese-layout 來快速實現上下欄布局：

• 中文布局 CSS 庫

這種方式不僅利于我們的學習，更加有助于我們的記憶。

然后也會帶領大家如何在不依賴于任何外界條件的情況下純手工實現上下欄布局：

• 固定定位法
• 外邊距的作用
• 非固定定位

作為擴展閱讀，我們還提供了交互更加充滿趣味性的漸隱漸現效果：

• 固定定位 + 漸隱漸現

不過由于漸隱漸現效果必須用 JS 才能獲取到當前頁面的滾動距離，所以最后這一小節只作為擴展閱讀，防止沒有 JS 基礎的小伙伴看了懵圈。

5. 小結

上下欄布局可以為用戶提供更加豐富的操作，通常用于業務需求略復雜的網站。

下一小節我們就來講講如何用代碼去實現一個上下欄布局。