細(xì)節(jié)論成?。o(wú)css時(shí)網(wǎng)頁(yè)的可讀性
網(wǎng)頁(yè)設(shè)計(jì)之細(xì)節(jié)決定成敗,網(wǎng)頁(yè)加載緩慢、加載丟失正常css怎么辦,網(wǎng)頁(yè)一團(tuán)糟,不忍直視~ 在無(wú)css加載的情況下,對(duì)網(wǎng)頁(yè)可讀性進(jìn)行的優(yōu)化也是很必要的。
先上示例,首頁(yè)酒店模塊的效果圖如下:

代碼結(jié)構(gòu)如下:
酒店
北京
上海
北京酒店列表
北京酒店列表
上海酒店列表
上海酒店列表
這種結(jié)構(gòu)在顯示上沒有任何問(wèn)題,切換城市時(shí)下面的列表會(huì)相應(yīng)改變。但當(dāng)無(wú)法正常加載css時(shí)顯示效果就比較杯具了,截圖如下:

接下去是其它城市的列表,太長(zhǎng)了圖片沒有截全。我們需要的至少是城市與所屬它的列表顯示在一起,在視覺上歸屬同一個(gè)模塊,也就是說(shuō)要在代碼結(jié)構(gòu)上把它們按照業(yè)務(wù)邏輯重現(xiàn)出來(lái):
北京
北京酒店列表
北京酒店列表
上海
上海酒店列表
上海酒店列表
這樣當(dāng)頁(yè)面出現(xiàn)no css的時(shí)候顯示效果就比較接近真實(shí)需求:

到這里就離成功不遠(yuǎn)了,接下來(lái)的問(wèn)題是如何用現(xiàn)在的 dl, dt, dd 實(shí)現(xiàn)想要的視覺效果。
1. 先給所有 dl 的外層 div 加樣式:position: relative,再給 dd 設(shè)置 position: absolute,這樣列表就可以脫離 dl 的文本流了,切換列表時(shí)保證它們顯示在同一個(gè)位置;
2. 城市橫排顯示,這時(shí)設(shè) dl 為浮動(dòng) float: left,再刷新果然橫過(guò)去了。不過(guò)現(xiàn)在笑還早了點(diǎn),不要忘了還有那萬(wàn)惡的 IE6 要兼容:給 dt 設(shè)置浮動(dòng)并轉(zhuǎn)行內(nèi)元素,否則會(huì)有多余的空隙 float: left; display: inline; 再刷新就OK了;
3. 補(bǔ)充一點(diǎn)為什么要在 dd 中加 ul,這要視頁(yè)面結(jié)構(gòu)而定,每一條除了標(biāo)題還有價(jià)格,還有個(gè)需要轉(zhuǎn)化的人民幣符號(hào) ¥,如果直接用 a 鏈接就需要大批量行內(nèi)轉(zhuǎn)塊元素,比較耗性能。最初想用多個(gè) dd,但因?yàn)橛薪^對(duì)定位的原因列表會(huì)重疊在一起,所以更換方案。
本文地址:http://m.likemindfilms.com/tutorial/wd2958.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏