《CSS教程》09章列表的设定

本章内容的关键是要结合第1章的Box的示意图，正确理解Margin、border、Padding、Context的概念。

标记符号和序号的设置

list-style-type: 种类的值如下.(IE能显示的很少，还有许多中文等国家语言有关的内容，
                 因不能正确显示就不列出来了。)
    none                    无
    disc                    实心圆圈(默认值)
    circle                  圆圈
    square                  四角方块
    lower-roman             小写罗马字
    upper-roman             大写罗马字
    lower-greek             希腊文的小文字
    decimal                 十进制
    decimal-leading-zero    0开头的序号
    lower-lartin            小写拉丁字母
    lower-alpha             小写字母
    upper-lartin            大写拉丁字母
    upper-alpha             大写字母

s09_01.htm

【HTML】
<table>

<tr>
<td>
<ol style="list-style-type: none">
<li>none</li>
<li>none</li>
<li>none</li>
</ol>
</td>
<td>
<ol style="list-style-type: disc">
<li>disc</li>
<li>disc</li>
<li>disc</li>
</ol>
</td>
<td>
<ol style="list-style-type: circle">
<li>circle</li>
<li>circle</li>
<li>circle</li>
</ol>
</td>
<td>
<ol style="list-style-type: square">
<li>square</li>
<li>square</li>
<li>square</li>
</ol>
</td>
</tr>

<tr>
<td>
<ol style="list-style-type: lower-roman">
<li>lower-roman</li>
<li>lower-roman</li>
<li>lower-roman</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-roman">
<li>upper-roman</li>
<li>upper-roman</li>
<li>upper-roman</li>
</ol>
</td>
<td>
<ol style="list-style-type: lower-greek">
<li>lower-greek</li>
<li>lower-greek</li>
<li>lower-greek</li>
</ol>
</td>
<td>
</td>
</tr>

<tr>
<td>
<ol style="list-style-type: cjk-ideographic">
<li>cjk-ideographic</li>
<li>cjk-ideographic</li>
<li>cjk-ideographic</li>
</ol>
</td>
<td>
<ol style="list-style-type: decimal">
<li>decimal</li>
<li>decimal</li>
<li>decimal</li>
</ol>
</td>
<td colspan="2">
<ol style="list-style-type: decimal-leading-zero">
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
</ol>
</td>
</tr>

<tr>
<td>
<ol style="list-style-type: lower-alpha">
<li>lower-alpha</li>
<li>lower-alpha</li>
<li>lower-alpha</li>
</ol>
</td>
<td>
<ol style="list-style-type: lower-latin">
<li>lower-latin</li>
<li>lower-latin</li>
<li>lower-latin</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-alpha">
<li>upper-alpha</li>
<li>upper-alpha</li>
<li>upper-alpha</li>
</ol>
</td>
<td>
<ol style="list-style-type: upper-latin">
<li>upper-latin</li>
<li>upper-latin</li>
<li>upper-latin</li>
</ol>
</td>
</tr>

<tr>
<td>
<ol style="list-style-type: hiragana">
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
</ol>
</td>
<td>
<ol style="list-style-type: katakana">
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
</ol>
</td>
<td>
<ol style="list-style-type: hiragana-iroha">
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
</ol>
</td>
<td>
<ol style="list-style-type: katakana-iroha">
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
</ol>
</td>
</tr>

<tr>
<td>
<ol style="list-style-type: hebrew">
<li>hebrew</li>
<li>hebrew</li>
<li>hebrew</li>
</ol>
</td>
<td>
<ol style="list-style-type: armenian">
<li>armenian</li>
<li>armenian</li>
<li>armenian</li>
</ol>
</td>
<td>
<ol style="list-style-type: georgian">
<li>georgian</li>
<li>georgian</li>
<li>georgian</li>
</ol>
</td>
<td>
</td>
</tr>

</table>

标记符号的图象表示

list-style-image: url(URL);

s09_02.htm

【CSS】
body { margin: 2em }
ul {
  list-style-image: url(star.gif);
  font: large "Times New Roman", Times, serif
}

【HTML】
<ul>
<li>list-style-image</li>
<li>list-style-image</li>
<li>list-style-image</li>
</ul>

标记符号在内侧表示

list-style-position: outside/inside
     outside:外侧， inside:内侧

s09_03.htm

【CSS】
body { margin: 2em }
.in { list-style-position: inside }
em {
  color: #ff3300;
  background-color: #ffffff;
  font-style: normal;
  font-weight: bold
}

【HTML】
<ul class="in">
<li><em>inside</em>的场合下<br>
是这样被表示的。
</li>
<li><em>inside</em>的场合下<br>
是这样被表示的。
</li>
</ul>

<ul>
<li><em>outside</em>(缺省值)<br>
是这样被表示的。
</li>
<li><em>outside</em>(缺省值)<br>
是这样被表示的。
</li>
</ul>

列表式样的一次性设定

list-style: 属性值

s09_04.htm

【CSS】
body { margin: 2em }
ul {
  font-size: large;
  list-style: url(star.gif) disc inside
}
li { margin-bottom: 1em }

【HTML】
<ul>
<li>
list-style-image的值<br>
也可以指定
</li>
<li>
list-style-type的值<br>
在图象不能被表示出来的场合<br>
下被利用。
</li>
<li>
list-style-position的值<br>
也可以指定，这个例子<br>
就是inside。
</li>
</ul>

《CSS教程》09章 列表的设定

《CSS教程》09章列表的设定