细节决定成败——无CSS时网页的可读性
2010-09-16 12:30
225 查看
先上示例,携程首页酒店模块的效果图如下:
代码结构如下:
这种结构在显示上没有任何问题,切换城市时下面的列表会相应改变。但当无法正常加载css时显示效果就比较杯具了,截图如下:
接下去是其它城市的列表,太长了图片没有截全。我们需要的至少是城市与所属它的列表显示在一起,在视觉上归属同一个模块,也就是说要在代码结构上把它们按照业务逻辑重现出来:
这样当页面出现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
代码结构如下:
<dl> <dt>酒店</dt> <dd>北京</dd> <dd>上海</dd> </dl> <ul> <li>北京酒店列表</li> <li>北京酒店列表</li> <li>上海酒店列表</li> <li>上海酒店列表</li> </ul> |
接下去是其它城市的列表,太长了图片没有截全。我们需要的至少是城市与所属它的列表显示在一起,在视觉上归属同一个模块,也就是说要在代码结构上把它们按照业务逻辑重现出来:
<dl> <dt>北京</dt> <dd> <ul> <li>北京酒店列表</li> <li>北京酒店列表</li> </ul> </dd> </dl> <dl> <dt>上海</dt> <dd> <ul> <li>上海酒店列表</li> <li>上海酒店列表</li> </ul> </dd> </dl> |
到这里就离成功不远了,接下来的问题是如何用现在的 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
相关文章推荐
- 细节决定成败——无CSS时网页的可读性
- 细节决定成败之网页设计中1像素的妙用
- 网页细节设置和推广才是决定SEO成败的关键
- 细节决定成败2: 链路负载均衡遇到IPS
- 构建高性能ASP.NET站点之三 细节决定成败
- 腾讯SOSO面试总结-细节决定成败
- 细节决定成败!
- 细节决定成败。
- 软件设计是怎样炼成的(7)——细节决定成败(详细设计)
- 细节决定成败 (汪中求将做客新华访谈)
- 细节决定成败(指向结构体指针)
- 第一篇:工作之我见一-----------细节决定成败(1) 推荐
- “细节决定成败”的说法不能绝对化
- 决定成败的人生细节
- 细节决定成败
- 面试:黄金法则——细节决定成败
- 细节决定成败
- JAVA开发--细节决定成败
- 细节决定成败 一个HR给毕业生的面试黄金法则
- 决定成败的49个细节