一、CSS列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
二、列表属性（list-style）
2.1 列表类型（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 type="text/css">
.disc{
list-style-type: disc;
}
.circle{
list-style-type: circle;
}
.square{
list-style-type: square;
}
.decimal{
list-style-type: decimal;
}
.lower-roman{
list-style-type: lower-roman;
}
.upper-roman{
list-style-type: upper-roman;
}
.lower-alpha{
list-style-type: lower-alpha;
}
.upper-alpha{
list-style-type:upper-alpha;
}
.none{
list-style-type: none;
}
.armenian{
list-style-type: armenian;
}
.cjk-ideographic{
list-style-type: cjk-ideographic;
}
.georgian{
list-style-type: georgian;
}
.lower-greek{
list-style-type: lower-greek;
}
.hebrew{
list-style-type: hebrew;
}
.hiragana-iroha{
list-style-type: hiragana-iroha;
}
.katakana{
list-style-type: katakana;
}
.katakana-iroha{
list-style-type: katakana-iroha;
}
.lower-latin{
list-style-type: lower-latin;
}
.upper-latin{
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h1>disc:</h1>
<ul class="disc">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>circle:</h1>
<ul class="circle">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>square</h1>
<ul class="square">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>decimal</h1>
<ul class="decimal">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>lower-roman</h1>
<ul class="lower-roman">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>upper-roman</h1>
<ul class="upper-roman">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>lower-alpha</h1>
<ul class="lower-alpha">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>upper-alpha</h1>
<ul class="upper-alpha">
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<h1>none：</h1>
<ul class="none">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>armenian：</h1>
<ul class="armenian">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>cjk-ideographic：</h1>
<ul class="cjk-ideographic">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>georgian：</h1>
<ul class="georgian">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>lower-greek：</h1>
<ul class="lower-greek">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>hebrew：</h1>
<ul class="hebrew">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>hiragana：</h1>
<ul class="hiragana">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>hiragana-iroha：</h1>
<ul class="hiragana-iroha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>katakana：</h1>
<ul class="katakana">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>katakana-iroha：</h1>
<ul class="katakana-iroha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>lower-latin：</h1>
<ul class="lower-latin">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>upper-latin：</h1>
<ul class="upper-latin">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
</body>
</html>
2.2 列表项图像（list-style-image）
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list-style-image</title>
<style type="text/css">
li{
list-style-image: url('向右.png');
}
</style>
</head>
<body>
<h1>用list-style-image重置项目符号:</h1>
<ul class="test">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</body>
</html>
2.3 列表标志位置（list-style-position）
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
- inside——列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside——默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
- inherit——规定应该从父元素继承 list-style-position 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.inside{
list-style-position: inside;
width: 120px;
}
.outside{
list-style-position: outside;
width: 120px;
}
</style>
</head>
<body>
<h1>list-style-position为inside</h1>
<ul class="inside">
<li>项目符号的位置是inside</li>
<li>项目符号的位置是inside</li>
<li>项目符号的位置是inside</li>
<li>项目符号的位置是inside</li>
</ul>
<h1>list-style-position为outside</h1>
<ul class="outside">
<li>项目符号的位置是outside</li>
<li>项目符号的位置是outside</li>
<li>项目符号的位置是outside</li>
<li>项目符号的位置是outside</li>
</ul>
</body>
</html>
网友评论