html 中的列表

html 中列表可以分为 1.  无序列表(ul--li 的形式)

　　　　　　　　　　2.  有序列表(ol li的形式)

　　　　　　　　　　3.  定义列表(dl 的形式)

下面来看几种列表的具体内容：

　　1.无序列表.

　　无序列表的格式如下：　　　　

<ul>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
</ul>    

　　无序列表有一些自带的默认样式，而且这些自带的默认样式在不同的浏览器中显示出来的效果是不一样的。我们一般使用 reset.css 去清楚这些默认样式间的差异。

　　无序列表的一些特定的css属性有list-style-type，list-style-position，和list-style-image。这些属性设置了列表项目符号的类型，标记的位置，以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

　　2. 有序列表：

　　　　有序列表的 html 代码一般如下：

<ol>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
</ol>  

　　有序列表常常在列表前面需要一个递增值的时候使用（如：1，2，3）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样，有序列表本身的语义已经不正确了。

　　3. 定义列表：

　　定义列表用来标记已经定义的列表项，它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配，下面的代码在严格的XHTML下是完全合法的：　　

<dl class="fore">
   <dt><a href="#nogo">男 装：</a></dt>
   <dd>addidas</dd>
   <dd>nike</dd>
   <dd>anta</dd>
</dl>

　　想要看效果可以参考demo页面。

实例和应用：

　　

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

•无序列表属于block水平的元素，不需要再在外面包裹一个div以应用background或其他图形扩展。
•当样式被禁用的时候，列表样式会从容的降级，保持其本来样式，可确保导航项与页面其他内容表现的不一样。
•尽管无序列表不会仅是一个简单的列表，要添加诸如<a>标签之类的元素，但是额外的<li>元素会使导航栏以更灵活的形式表现。
•导航分为列表和/或副列表，允许使用辅助的技术（如屏幕阅读器），用户可以很轻松地跳过整个导航条。

垂直下拉导航条demo。

本文摘要自张鑫旭大神的博客，博客内容链接：http://www.zhangxinxu.com/wordpress/?p=489