CSS 列表学习笔记

列表类型

在CSS中，有三种主要的列表类型：

1. 无序列表 (unordered list)
2. 有序列表 (ordered list)
3. 自定义列表 (definition list)

无序列表

无序列表显示为一系列项目，每个项目前面都有一个符号。默认符号是实心圆点。

示例

htmlCopy Code
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

效果

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

有序列表

有序列表显示为一系列按顺序编号的项目。

示例

htmlCopy Code
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

效果

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

自定义列表

自定义列表用于显示术语及其定义。

示例

htmlCopy Code
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

效果

<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>

列表样式

可以使用CSS样式来自定义列表的样式。以下是一些常见的列表样式属性：

list-style-type

用于指定列表项目前面的符号类型。

示例

cssCopy Code
ul {
  list-style-type: square;
}

效果

<ul style="list-style-type:square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

list-style-image

用于使用图像作为列表项目前面的符号。

示例

cssCopy Code
ul {
  list-style-image: url('bullet.png');
}

效果

<ul style="list-style-image:url('bullet.png')"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

list-style-position

用于控制列表项目标志的位置。

示例

cssCopy Code
ul {
  list-style-position: inside;
}

效果

<ul style="list-style-position:inside"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

以上是CSS列表学习笔记的示例，你可以根据需要添加更多样式来自定义列表的外观。