慎用UL列表
作者：rainoxu 来源：蓝色理想 时间：2009-03-25 20:21:00
今天交流会上，分享前端的开发经验，有一条虽然很快带过，但是我倒是印象蛮深刻的，就写点小结来分享一下吧。
不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。似乎对于一个能被排成序列的东西，我们往往会习惯性地给它们用一个ul框起来，这样会显得很有语义。当一个页面里有太多的元素被这样处理时，考虑一下如果要兼容到移动终端的访问或者CSS加载不正常的时候，那么用户的体验是非常不佳的，试想一下移动终端上面最好是能把尽可能多的内容呈现在极其有限的屏幕里，而ul在没有样式修饰的情况下，是会向下延伸的，对于超长的页面，用户在移动终端上向下滚动页面时，是会失去耐心的，对于网页也是一样，至少就我本人来说，我在阅读百度知道的一些资料时，会禁掉CSS样式，偶尔也会碰到一些体验不佳的页面。
其实我觉得inline的元素可以适当地采用，特别是像做一个横向的列表时，我们是不是可以考虑一下用内联来呈现视觉呢？好像这样说有点晕，那就用一些“粗糙”的实例来说明一下问题吧。要实现一个这样的导航，大家都会想到用ul。
OK，那我们就先用ul列表来实现它（样式方面不作太多深究，只为实现效果，所以写得很随意）
源代码
嗯，很棒，很漂亮的代码，在DOM查看器里发现真是太完美了：
再来假设一下样式没加载的时候，或者是用移动终端来访问会怎样：
看上去是垂直一列来呈现，如果一个页面里再多几个类似的ul，而它们本应在视觉上是要作横向排列的，而我们却“亢奋”地使用了ul来架构它们，那么有一天如果你心血来潮想用你的手机来访问自己写的页面，那真的是一件蛮痛苦的事情，你肯定会抱怨要看一个东西居然要滚动那么久。。。
标签：css,菜单,ul,列表
0
投稿猜你喜欢
Python内置方法实现字符串的秘钥加解密(推荐)
2023-10-22 23:45:35
python引用DLL文件的方法
2021-01-17 03:35:19
python 寻找离散序列极值点的方法
2021-03-13 15:26:15
Python机器学习之逻辑回归
2023-11-18 14:19:02
根据选择的checkbox列出选择的值
2008-07-30 12:56:00
在Pycharm中安装Pandas库方法(简单易懂)
2023-07-21 19:26:28
Python将xml和xsl转换为html的方法
2022-04-02 14:24:32
python pip安装的包目录(site-packages目录的位置)
2022-08-23 13:20:38
python代码实现小程序登录流程时序总结
2022-10-16 17:30:14
基于鼠标点击跟踪的用户点击行为分析
2008-04-24 19:22:00
全面了解django的缓存机制及使用方法
2023-07-22 09:51:58
正确使用字体和颜色 让网页内容更易阅读
2007-09-13 18:45:00
python开发的自动化运维工具ansible详解
2022-12-11 08:40:00
js function定义函数使用心得
2024-04-16 09:10:37
使用Python编写Linux系统守护进程实例
2022-06-09 16:50:52
python实现的分析并统计nginx日志数据功能示例
2023-07-30 20:08:15
跨浏览器的本地存储（一）：userData behavior
2008-08-05 18:13:00
浅谈开启magic_quote_gpc后的sql注入攻击与防范
2024-01-13 01:12:11
Python实现企业微信通知机器人的方法详解
2021-03-12 09:56:02
Python排序搜索基本算法之插入排序实例分析
2023-12-28 14:20:25
