文章目录
第15章 列表
15.1 创建有序列表和无序列表
- 有序列表
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
效果如下:
- one
- two
- 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.