單列布局簡介
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ù)手工打造一個單列布局:
4. 小結(jié)

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