列表——集大成的list-style(ol,ul,li)

综述

list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性: list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

<ol>  //list-style-type默认是decimal数字
  <li></li>
</ol>
ul  //list-style-type默认是disc实心圆

语法:

ul {    //加在ul,ol,li上都可以
    list-style:square url("sqpurple.gif");
}
###list-style-type
常用的 描述
none 无标记。
disc 默认。实心圆。
circle 空心圆。
square 实心方块。
decimal 阿拉伯数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
cjk-ideographic 中文数字(一、二...)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母(a, b, c, d, e, 等。)
upper-alpha 大写英文字母(A, B, C, D, E, 等。)

list-style-positoin

描述
inside 和li标签的内容贴再一起
outside 默认值。在li标签以外
inherit 规定应该从父元素继承 list-style-position 属性的值。

insideoutside主要在<li>比较宽而且设置了text-align: center的时候明显,inside的话,前标和内容都会被居中,outside的话只会内容居中,前标还是在<li>之外

lis-style-image:用处不大,调不了大小,看不起

描述
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

posted on 2022-03-10 20:40  In-6026  阅读(387)  评论(0)    收藏  举报

导航