CSS列表用法参考指南和示例

CSS中存在两种类型的列表, 即无序列表和有序列表

无序列表
在无序列表中, 列表项用项目符号标记。
有序列表
在有序列表中, 列表项用数字和字母标记。

列表项目标记：
此属性指定项目标记的类型, 即无序列表或有序
语法如下：

list-style-type:value;

现在, 值可以如下：

circle
小数, 例如：1、2、3等
十进制前导零, 例如：01, 02, 03, 04等
罗马小写
罗马大写
小写字母, 例如：a, b, c等
大写字母, 例如：A, B, C等
square

例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style-type:square; } ol.c { list-style-type:lower-alpha; } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one< /li> < li> two< /li> < li> three< /li> < /ul> < ul class = "b"> < li> one< /li> < li> two< /li> < li> three< /li> < /ul> < p> Ordered Lists < /p> < ol class = "c"> < li> one< /li> < li> two< /li> < li> three< /li> < /ol> < ol class = "d"> < li> one< /li> < li> two< /li> < li> three< /li> < /ol> < /body> < /html>

OUTPUT:

图像作为列表标记：
此属性为图像指定作为列表项标记。
例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style-image:url(d.jpg); } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one< /li> < li> two< /li> < li> three< /li> < /ul> < /body> < /html>

OUTPUT:

列表标记位置：
此属性指定列表项标记的位置。位置标记器有2种类型：
1.list-style-position: outside
在这种情况下, 项目符号点将位于列表项之外。列表的每一行的开头将垂直对齐。
例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style-position:outside; } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one < br> In this the bullet points will be outside the list item.< /li> < li> two< br> The start of each line of the list will be aligned vertically. < /li> < li> three< /li> < /ul> < /body> < /html> COPY TO

OUTPUT:

2. list-style-position：inside
在此, 要点将位于列表内。该线和项目符号点将垂直对齐。
例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style-position:inside; } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one < br> In this the bullet points will be inside the list item.< /li> < li> two< br> The line along with the bullet points will be aligned vertically.. < /li> < li> three< /li> < /ul> < /body> < /html>

OUTPUT:

速记属性：
此属性使我们可以在一个命令中设置所有列表属性。属性的顺序是类型, 位置和图像。
如果缺少任何属性, 则会插入默认值。
例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style:square inside; } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one< /li> < li> two< /li> < li> three< /li> < /ul> < /body> < /html>

OUTPUT:

样式列表：
列表可以用CSS格式化。可以为列表设置不同的颜色, 边框, 背景和填充。
例子：

< !DOCTYPE> < html> < head> < style> ul.a { list-style:square; background:hotpink; padding:20px; } < /style> < /head> < body> < h2> lsbin < /h2> < p> Unordered lists < /p> < ul class = "a"> < li> one< /li> < li> two< /li> < li> three< /li> < /ul> < /body> < /html>

OUTPUT:

嵌套列表：
列表也可以嵌套。我们有用于各节的子节, 因此我们需要嵌套列表。
【CSS列表用法参考指南和示例】例子：

< !DOCTYPE> < html> < head> < /head> < body> < h2> lsbin < /h2> < ul> < li> one < ul> < li> sub one< /li> < li> sub two< /li> < /ul> < /li> < li> two < ul> < li> sub one< /li> < li> sub two< /li> < /ul> < /li> < li> three < ul> < li> sub one< /li> < li> sub two< /li> < /ul> < /li> < /ul> < /body> < /html>