CSS list-style-type 属性

属性值

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

不同的列表项标记列表实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-type属性</title>
<style>
ul.a{list-style-type:circle}
ul.b{list-style-type:disc}
ul.c{list-style-type:square}
ol.d{list-style-type:armenian}
ol.e{list-style-type:cjk-ideographic}
ol.f{list-style-type:decimal}
ol.g{list-style-type:decimal-leading-zero}
ol.h{list-style-type:georgian}
ol.i{list-style-type:hebrew}
ol.j{list-style-type:hiragana}
ol.k{list-style-type:hiragana-iroha}
ol.l{list-style-type:katakana}
ol.m{list-style-type:katakana-iroha}
ol.n{list-style-type:lower-alpha}
ol.o{list-style-type:lower-greek}
ol.p{list-style-type:lower-latin}
ol.q{list-style-type:lower-roman}
ol.r{list-style-type:upper-alpha}
ol.s{list-style-type:upper-latin}
ol.t{list-style-type:upper-roman}
ol.u{list-style-type:none}
ol.v{list-style-type:inherit}
</style>
</head>
<body><h1>circle：标记是空心圆。</h1><ul class="a"><li>Circle type</li><li>Tea</li><li>Coca Cola</li></ul><h1>disc：默认。标记是实心圆。</h1><ul class="b"><li>Disc type</li><li>Tea</li><li>Coca Cola</li></ul><h1>square：标记是实心方块。</h1><ul class="c"><li>Square type</li><li>Tea</li><li>Coca Cola</li></ul><h1>armenian：传统的亚美尼亚编号方式</h1><ol class="d"><li>Armenian type</li><li>Tea</li><li>Coca Cola</li></ol><h1>cjk-ideographic：简单的表意数字</h1><ol class="e"><li>Cjk-ideographic type</li><li>Tea</li><li>Coca Cola</li></ol><h1>decimal：标记是数字。</h1><ol class="f"><li>Decimal type</li><li>Tea</li><li>Coca Cola</li></ol><h1>decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)</h1><ol class="g"><li>Decimal-leading-zero type</li><li>Tea</li><li>Coca Cola</li></ol><h1>georgian：传统的乔治亚编号方式(an, ban, gan, 等。)</h1><ol class="h"><li>Georgian type</li><li>Tea</li><li>Coca Cola</li></ol><h1>hebrew：传统的希伯来编号方式</h1><ol class="i"><li>Hebrew type</li><li>Tea</li><li>Coca Cola</li></ol><h1>hiragana：标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）</h1><ol class="j"><li>Hiragana type</li><li>Tea</li><li>Coca Cola</li></ol><h1>hiragana-iroha：标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）</h1><ol class="k"><li>Hiragana-iroha type</li><li>Tea</li><li>Coca Cola</li></ol><h1>katakana：标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）</h1><ol class="l"><li>Katakana type</li><li>Tea</li><li>Coca Cola</li></ol><h1>katakana-iroha：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）</h1><ol class="m"><li>Katakana-iroha type</li><li>Tea</li><li>Coca Cola</li></ol><h1>lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</h1><ol class="n"><li>Lower-alpha type</li><li>Tea</li><li>Coca Cola</li></ol><h1>lower-greek：小写希腊字母(alpha, beta, gamma, 等。)</h1><ol class="o"><li>Lower-greek type</li><li>Tea</li><li>Coca Cola</li></ol><h1>lower-latin：小写拉丁字母(a, b, c, d, e, 等。)</h1><ol class="p"><li>Lower-latin type</li><li>Tea</li><li>Coca Cola</li></ol><h1>lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)</h1><ol class="q"><li>Lower-roman type</li><li>Tea</li><li>Coca Cola</li></ol><h1>upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</h1><ol class="r"><li>Upper-alpha type</li><li>Tea</li><li>Coca Cola</li></ol><h1>upper-latin：大写拉丁字母(A, B, C, D, E, 等。)</h1><ol class="s"><li>Upper-latin type</li><li>Tea</li><li>Coca Cola</li></ol><h1>upper-roman：大写罗马数字(I, II, III, IV, V, 等。)</h1><ol class="t"><li>Upper-roman type</li><li>Tea</li><li>Coca Cola</li></ol><h1>none：无标记</h1><ol class="u"><li>None type</li><li>Tea</li><li>Coca Cola</li></ol><h1>inherit</h1><ol class="v"><li>inherit type</li><li>Tea</li><li>Coca Cola</li></ol>
</body>
</html>

效果如下：

CSS list-style-type 属性相关推荐

html属性选择器怎么写,html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写...
我正在尝试根据其type属性设置OL样式.所有UL和OL的列表样式属性之前已经被另一个我无法修改的CSS样式表消灭了,我需要重新设置列表样式,将类型考虑在内,即如果OL应该使用Roman人物或字母数字 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
CSS设置style属性的3种方法
CSS:层叠样式表可以将css样式编写到元素的style属性当中: 1.将样式直接写到style属性中,这种样式我们称为内联样式,内联样式只对当前的元素中的内容起作用,内联样式不方便复用,不推荐使用 ...
style type=text/css中的type=text/css到底是什么意思
最佳答案 type="text/css"是指定MIME类型,其中: text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件 ...
css 修改文字基准线_HTML4/HTML5 用CSS或style属性修改 hr 实线虚线点线双实线样式 ... ......
HTML4/HTML5 用CSS或style属性修改实线虚线点线双实线样式 HTML 是 Hyper Text Markup Language 的英文缩写,中文称为超文本标记语言.HTML 是 ...
html dom style pointer-events,如何在CSS中使用pointer-events属性
如何在CSS中使用pointer-events属性发布时间:2021-03-26 17:02:35 来源:亿速云阅读:57 作者:Leah 今天就跟大家聊聊有关如何在CSS中使用pointer-e ...
前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...
css选择器匹配没有属性x的元素[重复]
本文翻译自:css selector to match an element without attribute x [duplicate] This question already has an ...
css教程之列表属性
列表属性(相关css教程) CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'lis ...
HTML ol 标签的 type 属性
实例在有序列表中使用 type 属性: <ol type="I"><li>HTML</li><li>XHTML</li> ...

CSS list-style-type 属性

属性值

CSS list-style-type 属性相关推荐

最新文章

热门文章