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

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

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

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

• 酒店







• 北京







• 上海

• 北京酒店列表







• 北京酒店列表







• 上海酒店列表







• 上海酒店列表

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

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

• 北京







• 
  

  
  

  
  

  
  

  • 北京酒店列表

  
  

  
  

  • 北京酒店列表

  
  

  
  

  
  

  
  

• 上海







• 
  

  
  

  
  

  
  

  • 上海酒店列表

  
  

  
  

  • 上海酒店列表

  
  

  
  

  
  

  
  

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

到這里就離成功不遠了，接下來的問題是如何用現(xiàn)在的 dl, dt, dd 實現(xiàn)想要的視覺效果。

1. 先給所有 dl 的外層 div 加樣式：position: relative，再給 dd 設(shè)置 position: absolute，這樣列表就可以脫離 dl 的文本流了，切換列表時保證它們顯示在同一個位置;

2. 城市橫排顯示，這時設(shè) dl 為浮動 float: left，再刷新果然橫過去了。不過現(xiàn)在笑還早了點，不要忘了還有那萬惡的 IE6 要兼容：給 dt 設(shè)置浮動并轉(zhuǎn)行內(nèi)元素，否則會有多余的空隙 float: left; display: inline; 再刷新就OK了;

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