單列布局簡(jiǎn)介

1. 前言

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

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

2. 單列布局

抽象成極簡(jiǎn)形式的單列布局長(zhǎng)這樣：

但極簡(jiǎn)形式大家看起來可能會(huì)有些陌生，那么我們?cè)谶@一列里面加入許多行再看看：

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

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

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

3. 實(shí)現(xiàn)手段

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

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

4. 小結(jié)

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