慎用UL列表
作者:rainoxu 来源:蓝色理想 发布时间:2009-03-25 20:21:00
标签:css,菜单,ul,列表
今天交流会上,分享前端的开发经验,有一条虽然很快带过,但是我倒是印象蛮深刻的,就写点小结来分享一下吧。
不知道是标准害了大家还是大家害了标准,继class和div被滥用后,ul列表也有被不正确使用的趋势。似乎对于一个能被排成序列的东西,我们往往会习惯性地给它们用一个ul框起来,这样会显得很有语义。当一个页面里有太多的元素被这样处理时,考虑一下如果要兼容到移动终端的访问或者CSS加载不正常的时候,那么用户的体验是非常不佳的,试想一下移动终端上面最好是能把尽可能多的内容呈现在极其有限的屏幕里,而ul在没有样式修饰的情况下,是会向下延伸的,对于超长的页面,用户在移动终端上向下滚动页面时,是会失去耐心的,对于网页也是一样,至少就我本人来说,我在阅读百度知道的一些资料时,会禁掉CSS样式,偶尔也会碰到一些体验不佳的页面。
其实我觉得inline的元素可以适当地采用,特别是像做一个横向的列表时,我们是不是可以考虑一下用内联来呈现视觉呢?好像这样说有点晕,那就用一些“粗糙”的实例来说明一下问题吧。要实现一个这样的导航,大家都会想到用ul。
OK,那我们就先用ul列表来实现它(样式方面不作太多深究,只为实现效果,所以写得很随意)
源代码
嗯,很棒,很漂亮的代码,在DOM查看器里发现真是太完美了:
再来假设一下样式没加载的时候,或者是用移动终端来访问会怎样:
看上去是垂直一列来呈现,如果一个页面里再多几个类似的ul,而它们本应在视觉上是要作横向排列的,而我们却“亢奋”地使用了ul来架构它们,那么有一天如果你心血来潮想用你的手机来访问自己写的页面,那真的是一件蛮痛苦的事情,你肯定会抱怨要看一个东西居然要滚动那么久。。。
0
投稿
猜你喜欢
- 以前做音乐项目的时候,最让我们头痛的就是满足用户的问题。在音乐的领域,不要试图去满足所有用户这个定律得到了最充分的验证。究其原因,无非是音乐
- 常见的误解有: 1. 只用 ado.net ,无法进行动态 SQL 拼接。 2. 有几个动态参数,代码的重复量就成了这些参数的不同数量的组合
- 原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE
- 昨天晚上在家里把WM设计好的好台界面做成Html,在家里只用IE8和FF做了测试,感觉还行,除了感觉IE8还不成熟,渲染比较慢且不稳定外,标
- 由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理
- 神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框
- 希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章,讲述了黄金分割率在 CSS 中的应用。黄金分割率是
- 指定结果集的列名AS 子句可用来更改结果集列名或为导出列指定名称。当结果集列由对表或视图中的列的引用进行定义时,结果集列的名称与所引用列的名
- 随着现在宽屏显示器的流行,Flash的全屏模式下,越来越需要考虑到普屏显示器与宽屏显示器的差别。Flash全屏模式有以下特点:窗口最大化,且
- css的流行导致了标签的流行,很直观,看起来很清爽。流行的一部分,还有很多种功能强大且美观的导航。。。1. Change.org2. N.D
- 如果您的网站面向世界各地的冲浪者或者对外开展商贸活动,检测来访者的浏览器语言类型就非常现实了。这里提供的脚本可以检测流露;浏览器
- 阅读上一篇:AJAX的jQuery实现入门(一)要写入数据库,我们知道的最简单的就是注册了, 就做个最简单的注册表单, 看看是如何提交数据的
- 网上找了很多。貌似没什么好的解决办法。自己参考了下。把它直接整成一条SQL语句了。不过字段的格式只允许前面或者后面有字符。中间不允许出现字符
- 无论安装何版本的mysql,在管理工具的服务中启动mysql服务时都会在中途报错。内容为:在 本地计算机 无法启动mysql服务 错误106
- 本文通过实际业务系统中调整的一个案例,试图给出一个常见CPU消耗问题的一个诊断方法.大多数情况下,系统的性能问题都是由不良SQL代码引起的,
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 9 - Input Filterin
- 我插入Mysql5的中文一直是乱码。但是直接使用mysqlAdmin,EMS等工具插入DB就不是乱码。而且我还可以使用程序正常地读出来。原因
- 最近在研究雨哲软件采集程序的时候,需要获取真实软件地址时遇到了需要读取跳转页面跳转后的真实地址的问题。在网上找了很多方法,使用WinHttp
- W3C发布了WCAG 2.0提案(Web Content Accessibility Guidelines 网页内容无障碍指南),大概为了实
- 让你的读者能够方便地收藏你的文章到社会化书签(网摘)网站,如 新浪,google,yahoo,Del.icio.us, 365key等添加到