|
研究（2）中討論了柵格系統(tǒng)的基礎(chǔ)知識(shí)。這一篇將集中探討柵格系統(tǒng)的粒度問題。（注：如非特別指明，柵格系統(tǒng)均指24列960柵格系統(tǒng)）
淘寶的首頁（截圖）目前尚未嚴(yán)格遵守柵格系統(tǒng)，如果重構(gòu)的話，寬度方向可以考慮采用下面的柵格布局（只考慮頁面主體部分，忽略高度的比例）：
（圖1）
紛亂的高度世界
我們來看下圖1左上角。左上角部分目前的寬度為256px, 重構(gòu)的話可以將寬度縮小到230px以符合柵格（不可避免的要調(diào)整內(nèi)容，比如人氣寶貝中將只能放下3張圖片）。來仔細(xì)看下高度方向：
（圖2）
高度方向的布局是：90 : 117 : 100, 第一個(gè)間隔是8, 總高度為325. 很明顯，高度方向沒有任何柵格化的跡象。實(shí)際上，即便是嚴(yán)格遵守柵格系統(tǒng)的Yahoo!首頁，高度方向上也沒有嚴(yán)格柵格化。
這究竟是為何？
一切皆有可能
我們縮小關(guān)注點(diǎn)：
（圖3）
上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統(tǒng)兩列的寬度。對于右邊的文字，采取了如下樣式：
font-size: 12px;
line-height: 150%; /* 12 x 150% = 18px */中文字體是宋體，line-height的計(jì)算值是18px.
出處：
責(zé)任編輯：bluehearts
上一頁 下一頁 網(wǎng)頁柵格系統(tǒng)研究:粒度問題 [2]
|
第 1 頁 網(wǎng)頁柵格系統(tǒng)研究:粒度問題 [1]
第 2 頁 
