CSS列表

郑书鑫

已于 2023-07-27 10:25:19 修改

阅读量184

点赞数 1

分类专栏： css 文章标签： css 前端

于 2023-07-27 10:22:41 首次发布

本文链接：https://blog.csdn.net/weixin_63825009/article/details/131942395

版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML中的无序列表<ul>和有序列表<ol>，以及如何使用CSS的list-style-type属性改变列表项标记，如circle、square、upper-roman和lower-alpha。此外，还展示了如何使用list-style-image属性设置图像作为列表标记，以及如何通过list-style-type:none删除默认标记。文章进一步讨论了如何调整列表的外边距、内边距和颜色样式，以自定义列表的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

1.2不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.upper {
list-style-type: upper-roman;
}
ol.lower {
list-style-type: lower-alpha;
}

1.3图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

ul.sqpurple {
list-style-image: url('img/sqpurple.gif');
}

效果：

1.4删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。
请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

ul.reset {
list-style-type: none;
margin: 0;
padding: 0;
}

效果：

1.5设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

ol {
background: #ff9999;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
margin-bottom: 5px;
}
ol li:last-child {
margin-bottom: 0;
}
ul {
background: #3399ff;
padding: 20px;
}
ul li {
background: #cce5ff;
margin: 5px;
margin-left: 35px;
margin-bottom: 5px;
}
ul li:last-child {
margin-bottom: 0;
}

效果：