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

简介: 先上示例,携程首页酒店模块的效果图如下:代码结构如下:   酒店  北京  上海    北京酒店列表  北京酒店列表  上海酒店列表  上海酒店列表    这种结构在显示上没有任何问题,切换城市时下面的列表会相应改变。

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

代码结构如下:

 
    
  1. <dl> 
  2. <dt>酒店</dt> 
  3. <dd>北京</dd> 
  4. <dd>上海</dd> 
  5. </dl> 
  6. <ul> 
  7. <li>北京酒店列表</li> 
  8. <li>北京酒店列表</li> 
  9. <li>上海酒店列表</li> 
  10. <li>上海酒店列表</li> 
  11. </ul>  

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

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

 
    
  1. <dl> 
  2. <dt>北京</dt> 
  3. <dd> 
  4.   <ul> 
  5.    <li>北京酒店列表</li> 
  6.    <li>北京酒店列表</li> 
  7.   </ul> 
  8. </dd> 
  9. </dl> 
  10. <dl> 
  11. <dt>上海</dt> 
  12. <dd> 
  13.   <ul> 
  14.    <li>上海酒店列表</li> 
  15.    <li>上海酒店列表</li> 
  16.   </ul> 
  17. </dd> 
  18. </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 

目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
46 1
|
3月前
|
前端开发
|
18天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
44 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
19天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
47 4
|
2月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
58 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
2月前
|
前端开发 开发者
CSS样式覆盖规则详解,让你的网页更加出彩!
【8月更文挑战第23天】在Web前端开发中,理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时,哪些规则生效?本文通过实例解析这些规则。简单案例中,`.error`类选择器优先级高于`p`标签,文字显示红色。复杂案例涉及`.important`类与`!important`关键字,此时文字变为绿色。另外,内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
81 0
|
2月前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul &gt; li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
30 0