?

?

传智播客网页平面设计学院【http://icd.itcast.cn/】
一些实例与应用
1、导航条
迄今为止，无序列表最常见的用途就是导航条，无论是水平的还是垂直的，自从基于表的布局已经过时，无序列表已经被当作导航元素的基础被广泛的应用，原因如下列表所示：
?无序列表属于block水平的元素，不需要再在外面包裹一个div以应用background或其他图形扩展。
?当样式被禁用的时候，列表样式会从容的降级，保持其本来样式，可确保导航项与页面其他内容表现的不一样。
?尽管无序列表不会仅是一个简单的列表，要添加诸如<a>标签之类的元素，但是额外的<li>元素会使导航栏以更灵活的形式表现。
?导航分为列表和/或副列表，允许使用辅助的技术（如屏幕阅读器），用户可以很轻松地跳过整个导航条。

2、下拉菜单


3、照片显示
HTML列表标签ul,li提供了有效的方式显示照片列表，原因与上面导航条提到的一样。下面就是一些以ul,li 标签为HTML基础的的照片画廊或是照片显示组件。
innerfade插件能让任意列表形式的内容依次淡入淡出切换显示，或是上下切换显示。内容可以是文字，图片等。支持各式标签，列表标签ul,li或是div，p标签都可以。
可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示，或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:



4、代码高亮
许多博客和教程网站含有JavaScript高亮代码的都是转换pre元素或textarea元素为有序列表，如下面的截图。其中有名的一款代码高亮插件是Alex Gorbatchev’s SyntaxHighlighter。
下为类似高亮插件的效果截图：

5、博客评论
博客评论，包括这些WordPress驱动的站点，以有序列表构建，提供非常灵活的样式选项，并奠定了评论嵌套的基础。下图截自腾讯CDC T.d 昨天发布的The Story of Mr.Gray — Web 交互设计“灰色”的8类应用一文评论部分。

6、商品列表
最典型的代表莫过于淘宝网首页的“宝贝类目”一栏的万千商品类目的显示：


HTML标签元素就是砖砖瓦瓦，看上去很一般，但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力，于是有了我们多姿多彩的互联网。列表元素也是如此，虽然还有几十更多的用途和技术可以在本文中讨论，但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌，帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。
制作全套视频下载地址：
http://icd.itcast.cn/icd/video.shtml?from=wl