- 无序列表
在无序列表中, 列表项用项目符号标记。 - 有序列表
在有序列表中, 列表项用数字和字母标记。
列表项目标记:
此属性指定项目标记的类型, 即无序列表或有序
语法如下:
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:
嵌套列表:
列表也可以嵌套。我们有用于各节的子节, 因此我们需要嵌套列表。
例子:
<!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>
OUTPUT: