本章教您如何使用CSS控制list type，position，style等。
无涯教程有以下五个CSS属性，可用于控制列表-
list-style-type : 设置列表项标志的类型。
list-style-position : 设置列表中列表项标志的位置。
list-style-image : 将图象设置为列表项标志。
list-style : 简写属性。用于把所有用于列表的属性设置于一个声明中。
marker-offset : 指定标签与列表中文本之间的距离。
现在将通过示例了解如何使用这些属性。
list-style-type 属性
通过 list-style-type 属性，可以在无序列表的情况下控制项目符号点的形状或样式，并在有序列表的情况下控制编号字符的样式。
这是可以用于无序列表的值-
| Sr.No. | Value & Remark |
|---|---|
| 1 |
none NA |
| 2 |
disc( default ) 实心圆 |
| 3 |
circle 一个空圆 |
| 4 |
square 实心方块 |
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它将产生以下输出-
list-style-position 属性
list-style-position 属性指示标签应出现在包含项目符号点的框的内部还是外部。它可以是两个值之一-
| Sr.No. | Value & Remark |
|---|---|
| 1 |
none NA |
| 2 |
inside 列表项目标签放置在文本以内，且环绕文本根据标签对齐。 |
| 3 |
outside 默认值。保持标签位于文本的左侧。列表项目标签放置在文本以外，且环绕文本不根据标签对齐。 |
这是一个例子-
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它将产生以下输出-
list-style-image 属性
列表样式图像允许您指定图像，以便可以使用自己的符号样式。如果找不到给定的图像，则使用默认符号。
<html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它将产生以下输出-
list-style 属性
列表样式允许您将所有列表属性指定为一个表达式。这些属性可以按任何顺序出现。
<html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它将产生以下输出-
marker-offset 属性
marker-offset 属性可让您指定标签和与该标签有关的文本之间的距离。
<html>
<head>
</head>
<body>
<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css-lists.html
标签：style,Science,List,无涯,list,Social,Maths,Physics,CSS From： https://blog.51cto.com/u_14033984/9380472