單列布局簡介

1. 前言

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

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

2. 單列布局

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

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

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

當(dāng)點擊具體的某一行時就會跳轉(zhuǎn)到相應(yīng)的二級頁面。

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

3. 實現(xiàn)手段

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

• 外邊距法
• 彈性布局
• 絕對定位 + 平移
• 網(wǎng)格布局
• 行內(nèi)塊元素
• 增光添彩

4. 小結(jié)

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