6、列表和鼠标指针管理

列表和鼠标指针管理

1. 列表样式的自定义

在网页设计中，列表是组织信息的重要工具。通过使用CSS，我们可以轻松地自定义无序列表（ <ul> ）、有序列表（ <ol> ）和定义列表（ <dl> ）的样式，使其更符合设计需求。以下是详细的步骤：

1.1 自定义无序列表

无序列表是最常用的列表类型之一。默认情况下，无序列表的列表项前会有圆点符号。我们可以通过CSS修改这些默认样式。

示例代码

ul {
    list-style-type: square; /* 使用方块符号 */
}

ul li {
    margin-bottom: 10px; /* 列表项之间的间距 */
}

1.2 使用图像作为列表项标记

除了使用内置的符号外，我们还可以使用图像作为列表项标记，使列表更具个性化。

示例代码

ul.custom-bullets {
    list-style-type: none; /* 移除默认符号 */
    padding-left: 0;
}

ul.custom-bullets li {
    background: url('bullet.png') no-repeat left center; /* 使用图像作为标记 */
    padding-left: 20px