《HTML5与CSS3基础教程》第十五章学习笔记 列表

第15章 列表

15.1 创建有序列表和无序列表

• 有序列表

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

效果如下：

1. one
2. two
3. three

- 无序列表 ```

• one
• two
• three

```

效果如下：

• one
• two
• three

15.2 选择标记

<li style="list-style-type:disc">圆点</li>
<li style="list-style-type:circle">圆圈</li>
<li style="list-style-type:square">方块</li>
<li style="list-style-type:decimal">数字</li>
<li style="list-style-type:upper-alpha">大写字母</li>
<li style="list-style-type:lower-alpha">小写字母</li>
<li style="list-style-type:upper-roman">大写罗马数字</li>
<li style="list-style-type:lower-roman">小写罗马数字</li>

效果如下：

圆点

圆圈

方块

数字

大写字母

小写字母

大写罗马数字

小写罗马数字

15.3 使用定制的标记

li{
    list-style-image:url(image.png);
}

15.4 选择列表的起始编号

1.设置整个列表编号方案的初始值：<ol start="2">
2.修改有序列表中某列表项目的编号：<li value="5">

15.5 控制标记的位置

• 使标记在文本块之外(默认值)：ul{list-style-position:outside;}
• 是标记在列表项目的左侧外边距开始：ul{list-style-position:inside;}

提示　如果列表项目中的文本显得较为拥挤，则可以通过设置line-height增大文本行间距。例如，可以设置li { line-height: 1.3; }。不要将行高的设置与列表项目间距（由对li设置的margin-top或margin-bottom控制）弄混。例如，li { margin-bottom: .5em; }

15.6 同时设置所有的列表样式属性

• list-style可以提供list-style-type、list-style-position、list-style-image的简写

15.8 创建描述列表

• 描述列表：据HTML5规范，“由名称及其值构成的组合可以是术语和定义、元数据主题和值、问题和答案，以及任何其他的名–值组。”
  • dl：definition list，自定义列表
  • dt：definition term，自定义列表组
  • dd：definition description，自定义描述

<dl>
    <dt>Boris Karloff</dt>
        <dd>Best known for his role in <cite>Frankenstein</cite> and related horror films, this scaremaster's real name was William Henry Pratt.</dd>
    <dt>Christopher Lee</dt>
        <dd>Lee took a bite out of audiences as Dracula in multiple Hammer horror classics.</dd>
</dl>

效果如下：

Boris Karloff

Best known for his role in Frankenstein and related horror films, this scaremaster's real name was William Henry Pratt.

Christopher Lee

Lee took a bite out of audiences as Dracula in multiple Hammer horror classics.