CSS列表样式：无序列表、有序列表、自定义列表

例如，下面的代码会将无序列表的小圆点改为实心方块：

ul {
  list-style-type: square;
}

除了实心方块，还可以使用其他的样式如圆形、实心圆、实心菱形等等。

代码案例

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<style>
  ul {
    list-style-type: square;
  }
</style>

有序列表

有序列表是由一组用

例如，下面的代码会将有序列表的数字改为大写字母：

ol {
  list-style-type: upper-alpha;
}

除了大写字母，还可以使用其他的样式如小写字母、罗马数字、带括号的数字等等。

代码案例

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

<style>
  ol {
    list-style-type: upper-alpha;
  }
</style>

自定义列表

自定义列表是由一组用

例如，下面的代码会将无序列表的小圆点改为自定义的图片：

ul {
  list-style-image: url('marker.png');
}

除了图片，还可以使用其他的标记如字母、数字、符号等等。

代码案例

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<style>
  ul {
    list-style-image: url('marker.png');
  }
</style>

以上就是CSS中列表样式的三种类型，希望对小白们有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS表格样式：边框样式、背景颜色、表格布局
• 下一篇： CSS定位与布局：相对定位、绝对定位、浮动