單列布局簡介

1. 前言

單列布局是目前運用最為廣泛的布局之一，因其結構清晰、一目了然、無論屏幕大小都能獲得較為一致的效果等優點深受大家喜愛。

接下來我們一起來看一看抽象模式的單列布局長什么樣。

2. 單列布局

抽象成極簡形式的單列布局長這樣：

但極簡形式大家看起來可能會有些陌生，那么我們在這一列里面加入許多行再看看：

這樣看起來是不是就好多了呢？該種布局方式通常會在列里面放置許多行，每一行便代表了一個信息，并且左邊通常都會配上一個圖片以形成左圖右文的形式：

當點擊具體的某一行時就會跳轉到相應的二級頁面。

單列布局通常用于首頁等引導頁面，陳列展示各種信息，點擊后便跳轉至具體的詳情頁面。

3. 實現手段

由于單列布局過于簡單，并且可以用居中布局來進行代替，所以 chinese-layout 并沒有去實現這個布局。
不過這難不倒動手能力很強的我們，咱們一起來用各式各樣、形態各異的 CSS 技術手工打造一個單列布局：

• 外邊距法
• 彈性布局
• 絕對定位 + 平移
• 網格布局
• 行內塊元素
• 增光添彩

4. 小結

大家可以看看自己常去的網站是不是運用了這種布局，比如好多手機瀏覽器一打開就是一堆新聞廣告之類。
仔細觀察一下是不是單列布局，大家觀察布局的時候要盡量將其抽象，不必關心內部的細節內容。