快速业务通道

网页设计经验分享;没有CSS时网页的可看性

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-22

先上示例,首页酒店模块的效果图如下:

代码结构如下:

<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://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号