星狮创想慎用UL列表.docVIP

星狮创想：慎用UL列表 星狮创想成立于2009年，翔通动漫集团旗下远程教育品牌，凭借翔通10年手机动漫行业经验，成为国内最早的UI设计培训机构，凭借超前的艺术设计理念，倾力打造平面设计，网页设计，UI设计，交互式设计培训行业高端品牌，国内知名互联网企业总监授课，终身就业指导。 今天交流会上，分享前端的开发经验，有一条虽然很快带过，但是我倒是印象蛮深刻的，就写点小结来分享一下吧。 不知道是标准害了大家还是大家害了标准，继class和div被滥用后，ul列表也有被不正确使用的趋势。似乎对于一个能被排成序列的东西，我们往往会习惯性地给它们用一个ul框起来，这样会显得很有语义。当一个页面里有太多的元素被这样处理时，考虑一下如果要兼容到移动终端的访问或者CSS加载不正常的时候，那么用户的体验是非常不佳的，试想一下移动终端上面最好是能把尽可能多的内容呈现在极其有限的屏幕里，而ul在没有样式修饰的情况下，是会向下延伸的，对于超长的页面，用户在移动终端上向下滚动页面时，是会失去耐心的，对于网页也是一样，至少就我本人来说，我在阅读百度知道的一些资料时，会禁掉CSS样式，偶尔也会碰到一些体验不佳的页面。 其实我觉得inline的元素可以适当地采用，特别是像做一个横向的列表时，我们是不是可以考虑一下用内联来呈现视觉呢？好像这样说有点晕，那就用一些“粗糙”的实例来说明一下问题吧。要实现一个这样的导航，大家都会想到用ul。 OK，那我们就先用ul列表来实现它（样式方面不作太多深究，只为实现效果，所以写得很随意） 源代码 lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN gt;BRlt;html xmlns= lang=zh-cngt;BRlt;headgt;BRlt;meta http-equiv=Content-Type content=text/html; charset=gb2312 /gt;BRlt;meta http-equiv=Content-Language content=gb2312 /gt;BRlt;titlegt;lt;/titlegt;BRlt;/headgt;BRlt;bodygt;BRlt;style type =text/cssgt; BR/* lt;![CDATA[ */ BR*{BR list-style:none;BR margin:0;BR padding:0;BR font-size:12px;BR}BR#navigation{BR margin:10px auto;BR width:510px;BR overflow:hidden;BR}BR#navigation li{BR float:left;BR text-align:center;BR width:50px;BR border-left:1px solid #CCC;BR margin-left:-1px;BR}BR#navigation li a,BR#navigation li a:hover{BR color:#999;BR}BR/* ]]gt; */ BRlt;/stylegt; BRlt;ul id=navigationgt;BR lt;ligt;lt;a href=gt;菜单1lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单2lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单3lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单4lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单5lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单6lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单7lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单8lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单9lt;/agt;lt;/ligt;BR lt;ligt;lt;a href=gt;菜单10lt;/agt;lt;/ligt;BRlt;/ulgt; lt;/bodygt;BRlt;/htmlgt; 嗯，很棒，很漂亮的代码，在DOM查看器里发现真是太完美了： 再来假设一下样式没加载的时候，或者是用移动终端来访问会怎样： 看上去是垂直一列来呈现，如果一个页面里再多几个类似的ul，而它们本应在视觉上是要作横向排列的，而我们却“亢奋”地使用了ul来架构它们，那么有一天如果你心血来潮想用你的手机来访问自己写的页面