芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

CSS 有序列表 ol 和无序列表 ul

css
作者 芒果/分类 代码/发布于 2009-06-07 10:08

CSS 中的 ol 意为 ordered list,即有序列表,用于包含有先后顺序的 li 元素。常用的 ul 意为 unordered list,即无序列表。实际应用中,一般对多个 li 元素的顺序没有要求,因此 ul 比 ol 应用更广泛。

从页面表现看,其主要区别为:ol 默认对 li 元素设定序号,如 1、2、3 依次类推;而 ul 默认则为黑色圆点。

通过简单定义 CSS,可以隐藏 ol 和 ul 的列表前缀:

ol,ul{list-style:none;padding:0;margin:0;}

为体现有序列表 ol 的有序特性,可保留默认序号,并设定样式:

//CSS 代码
ol{font-family:Georgia;font-style:italic;font-size:1em;}
ol p{font-family:Arial;font-style:normal;font-size:.8em;}
//HTML 代码
<ol>
<li><p>list1</p></li>
<li><p>list2</p></li>
<li><p>list3</p></li>
</ol>

当然,可以自定义 CSS 以增强序号的表现力。但必须用 p 标记包含每个 li 元素的内容,以分离内容和序号的样式。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-ordered-list-ol-and-unordered-list-ul/" title="CSS 有序列表 ol 和无序列表 ul" rel="bookmark">CSS 有序列表 ol 和无序列表 ul | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. bolo /2009-06-07 17:15

    嗯,以前没注意这个东西,一般都会去掉小黑点的。 回应

    #1

下面我简单说几句