【网站制作视频教程】-HTML CSS列表元素ul,ol,dl的研究与应用！-传智播客

一些实例与应用
1、导航条
迄今为止，无序列表最常见的用途就是导航条，无论是水平的还是垂直的，自从基于表的布局已经过时，无序列表已经被当作导航元素的基础被广泛的应用，原因如下列表所示：

2、下拉菜单

3、照片显示
HTML列表标签ul,li提供了有效的方式显示照片列表，原因与上面导航条提到的一样。下面就是一些以ul,li 标签为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、商品列表
最典型的代表莫过于淘宝网首页的“宝贝类目”一栏的万千商品类目的显示：

制作全套视频下载地址：

http://icd.itcast.cn/icd/video.shtml?from=wl