上下欄布局簡介

1. 前言

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

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

2. 上下欄布局

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

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

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

3. 漸隱漸現(xiàn)

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

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

4. 實現(xiàn)手段

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

• 中文布局 CSS 庫

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

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

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

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

• 固定定位 + 漸隱漸現(xiàn)

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

5. 小結(jié)

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

下一小節(jié)我們就來講講如何用代碼去實現(xiàn)一個上下欄布局。