細(xì)節(jié)論成敗！無css時(shí)網(wǎng)頁的可讀性

網(wǎng)頁設(shè)計(jì)之細(xì)節(jié)決定成敗，網(wǎng)頁加載緩慢、加載丟失正常css怎么辦，網(wǎng)頁一團(tuán)糟，不忍直視~ 在無css加載的情況下，對網(wǎng)頁可讀性進(jìn)行的優(yōu)化也是很必要的。

先上示例，首頁酒店模塊的效果圖如下：

代碼結(jié)構(gòu)如下：

• 酒店







• 北京







• 上海

• 北京酒店列表







• 北京酒店列表







• 上海酒店列表







• 上海酒店列表

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

接下去是其它城市的列表，太長了圖片沒有截全。我們需要的至少是城市與所屬它的列表顯示在一起，在視覺上歸屬同一個(gè)模塊，也就是說要在代碼結(jié)構(gòu)上把它們按照業(yè)務(wù)邏輯重現(xiàn)出來：

• 北京







• 
  

  
  

  
  

  
  

  • 北京酒店列表

  
  

  
  

  • 北京酒店列表

  
  

  
  

  
  

  
  

• 上海







• 
  

  
  

  
  

  
  

  • 上海酒店列表

  
  

  
  

  • 上海酒店列表

  
  

  
  

  
  

  
  

這樣當(dāng)頁面出現(xiàn)no css的時(shí)候顯示效果就比較接近真實(shí)需求：

到這里就離成功不遠(yuǎ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，再刷新果然橫過去了。不過現(xiàn)在笑還早了點(diǎn)，不要忘了還有那萬惡的 IE6 要兼容：給 dt 設(shè)置浮動(dòng)并轉(zhuǎn)行內(nèi)元素，否則會(huì)有多余的空隙 float: left; display: inline; 再刷新就OK了;

3. 補(bǔ)充一點(diǎn)為什么要在 dd 中加 ul，這要視頁面結(jié)構(gòu)而定，每一條除了標(biāo)題還有價(jià)格，還有個(gè)需要轉(zhuǎn)化的人民幣符號 ￥，如果直接用 a 鏈接就需要大批量行內(nèi)轉(zhuǎn)塊元素，比較耗性能。最初想用多個(gè) dd，但因?yàn)橛薪^對定位的原因列表會(huì)重疊在一起，所以更換方案。