- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
在 HTML 中,列表主要有两种类型:
- 无序列表(<ul>)- 列表项用的是项目符号标记
- 有序列表(<ol>)- 列表项用的是数字或字母标记
CSS 列表属性使您可以:
- 为有序列表设置不同的列表项标记
- 为无序列表设置不同的列表项标记
- 将图像设置为列表项标记
- 为列表和列表项添加背景色
list-style-type 属性指定列表项标记的类型。
下例显示了一些可用的列表项标记:
实例 ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; }亲自试一试
注释:有些值用于无序列表,而有些值用于有序列表。
图像作为列表项标记list-style-image 属性将图像指定为列表项标记:
实例 ul { list-style-image: url(‘sqpurple.gif‘); }亲自试一试
定位列表项标记list-style-position 属性指定列表项标记(项目符号)的位置。
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的:
- Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
- Tea
- Coca-cola
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本:
- Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
- Tea
- Coca-cola
亲自试一试
删除默认设置list-style-type:none 属性也可以用于删除标记/项目符号。请注意,列表还拥有默认的外边距和内边距。要删除此内容,请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 :
实例 ul { list-style-type: none; margin: 0; padding: 0; }亲自试一试
列表 - 简写属性list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性:
实例 ul { list-style: square inside url("sqpurple.gif"); }亲自试一试
在使用简写属性时,属性值的顺序为:
- list-style-type(如果指定了 list-style-image,那么在由于某种原因而无法显示图像时,会显示这个属性的值)
- list-style-position(指定列表项标记应显示在内容流的内部还是外部)
- list-style-image(将图像指定为列表项标记)
如果缺少上述属性值之一,则将插入缺失属性的默认值(如果有)。
设置列表的颜色样式我们还可以使用颜色设置列表样式,使它们看起来更有趣。
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表,而添加到 <li> 标记的属性将影响各个列表项:
实例 ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }结果:
- Coffee
- Tea
- Coca Cola
亲自试一试
更多实例list-style | 简写属性。在一条声明中设置列表的所有属性。 |
list-style-image | 指定图像作为列表项标记。 |
list-style-position | 规定列表项标记(项目符号)的位置。 |
list-style-type | 规定列表项标记的类型。 |
CSS 列表
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)