细节决定成败——无CSS时网页的可读性

先上示例，携程首页酒店模块的效果图如下：

代码结构如下：

     
     
      
      <dl> 
      
       <dt>酒店</dt> 
      
       <dd>北京</dd> 
      
       <dd>上海</dd> 
      
      </dl> 
      
      <ul> 
      
       <li>北京酒店列表</li> 
      
       <li>北京酒店列表</li> 
      
       <li>上海酒店列表</li> 
      
       <li>上海酒店列表</li> 
      
      </ul>

这种结构在显示上没有任何问题，切换城市时下面的列表会相应改变。但当无法正常加载css时显示效果就比较杯具了，截图如下：

接下去是其它城市的列表，太长了图片没有截全。我们需要的至少是城市与所属它的列表显示在一起，在视觉上归属同一个模块，也就是说要在代码结构上把它们按照业务逻辑重现出来：

     
     
      
      <dl> 
      
       <dt>北京</dt> 
      
       <dd> 
      
        <ul> 
      
         <li>北京酒店列表</li> 
      
         <li>北京酒店列表</li> 
      
        </ul> 
      
       </dd> 
      
      </dl> 
      
      <dl> 
      
       <dt>上海</dt> 
      
       <dd> 
      
        <ul> 
      
         <li>上海酒店列表</li> 
      
         <li>上海酒店列表</li> 
      
        </ul> 
      
       </dd> 
      
      </dl>

这样当页面出现no css的时候显示效果就比较接近真实需求：

到这里就离成功不远了，接下来的问题是如何用现在的 dl, dt, dd 实现想要的视觉效果。

1. 先给所有 dl 的外层 div 加样式：position: relative，再给 dd 设置 position: absolute，这样列表就可以脱离 dl 的文本流了，切换列表时保证它们显示在同一个位置；

2. 城市横排显示，这时设 dl 为浮动 float: left，再刷新果然横过去了。不过现在笑还早了点，不要忘了还有那万恶的 IE6 要兼容：给 dt 设置浮动并转行内元素，否则会有多余的空隙 float: left; display: inline; 再刷新就OK了；

3. 补充一点为什么要在 dd 中加 ul，这要视页面结构而定，每一条除了标题还有价格，还有个需要转化的人民币符号 ¥，如果直接用 a 链接就需要大批量行内转块元素，比较耗性能。最初想用多个 dd，但因为有绝对定位的原因列表会重叠在一起，所以更换方案。

http://ued.ctrip.com/blog/?p=1083

相关文章：

你感兴趣的文章：

标签云：