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>
OUTPUT:
推荐阅读
- 检查字符串是否可以重新排列以形成特殊回文
- CSS链接用法参考指南和示例
- PHP Imagick函数完整参考介绍
- 小小招式让你给文字添加上划线
- 高手教你如何运用VBA代码完成迅速录入Excel数据
- 运用永中Office 带来"邮件合并"
- Word文档打印技巧全攻略:按页序排列输出文档
- 让你受益无穷的Word实用小技巧8则
- 加快上网速度有妙招 更改注册表