本章教您如何使用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