[分享]css列表前面点的样式

CSS 列表是网页开发中常见的元素之一，而列表前面的点样式也会直接影响到页面的美观度和阅读体验。CSS 提供了多种样式来自定义列表前面的点，下面我们来一一了解。/ 使用列表图片 / ul { list...

CSS 列表是网页开发中常见的元素之一，而列表前面的点样式也会直接影响到页面的美观度和阅读体验。CSS 提供了多种样式来自定义列表前面的点，下面我们来一一了解。

/* 使用列表图片 */
ul {
    list-style-image: url('image/bullet.png');
}

/* 无序列表使用实心点 */
ul {
    list-style-type: disc;
}

/* 无序列表使用空心点 */
ul {
    list-style-type: circle;
}

/* 无序列表使用方块 */
ul {
    list-style-type: square;
}

/* 有序列表使用数字 */
ol {
    list-style-type: decimal;
}

/* 有序列表使用小写字母 */
ol {
    list-style-type: lower-alpha;
}

/* 有序列表使用大写字母 */
ol {
    list-style-type: upper-alpha;
}

/* 有序列表使用小写罗马数字 */
ol {
    list-style-type: lower-roman;
}

/* 有序列表使用大写罗马数字 */
ol {
    list-style-type: upper-roman;
} 

以上样式均可在对应的列表元素（ul 或 ol）中添加，自定义样式可以改善页面的视觉效果和 user experience，为网页加分不少。