列表与超链接

5.1 列表标记
? 5.1.2 有序列表ol
? 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序 排列定义，有序列表的基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
...... </ol>
? 在上面的语法中，<ol></ol>标记用于定义有序列表，<li></li>为具 体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一 对<li></li>。
? inside：列表项目符号位于列表文本以内。 ? outside：列表项目符号位于列表文本以外（默认值）。
5.2 CSS 控制列表样式
? 5.2.4 list-style 属性
? 列表样式也是一个复合属性，可以将列表相关的样式都综合定义 在一个复合属性list-style中。其语法格式如下：
list-style:列表项目符号 列表项目符号的位置 列表项目图像;
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ...
</dl>
5.1 列表标记
? 5.1.3 定义列表dl
? 在上面的语法中，<dl></dl>标记用于指定定义列表，<dt></dt>和 <dd></dd>并列嵌套于<dl></dl>中，其中，<dt></dt>标记用于指 定术语名词，<dd></dd>标记用于对名词进行解释和描述。一对 <dt></dt>可以对应多对<dd></dd>，即可以对一个名词进行多项 解释。
列表类型 无序列表（ul）
有序列表（ol）
属性值 disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman
<ul> 、 <ol>公 共属性
none
显示效果 ● ○ ■
阿拉伯数字1、2、3...... 大写英文字母A、B、C...... 小写英文字母a、b、c...... 大写罗马数字I、II、III...... 小写罗马数字i、ii、iii......
5.1 列表标记
? 5.1.4 列表的嵌套应用
? 在使用列表时，列表项中可能包含若干子列表项。要想在列表项 中定义子列表项就需要将列表进行嵌套。
5.2 CSS 控制列表样式
? 5.2.1 list-style-type 属性
? list-style-type属性用于控制无序和有序列表的项目符号，其取值 有多种，如下表所示。
第五章 列表与超链接
? 列表标记 ? 超链接标记
? 列表样式的控制 ? CSS伪类
? 目录
列表标记
CSS控制列表样式
超链接标记
链接伪类控制超链接
阶段案例-制作新闻列表
5.1 列表标记
? 5.1.1 无序列表ul
? 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基 本语法格式如下：
<ul> <li>列表项1 </ li> <li>列表项2 </ li> <li>列表项3 </ li>
注意 : ? 各浏览器对有序列表的 type 和value 属性的解析不同。 ? 不赞成使用 <ol><li> 的type 、start 和value 属性，可通过 CSS样式替代。
5.1 列表标记
? 5.1.3 定义列表dl
? 定义列表常用于对术语或名词进行解释和描述，定义列表的列表
项前没有任何项目符号。其基本语法如下：
? list-style-image属性的取值为图像的url（地址）。使用list-styleimage属性可以为各个列表项设置项目图像，使列表的样式更加美 观。
5.2 CSS 控制列表样式
? 5.2.3 list-style-position 属性
? list-style-position属性用于控制列表项目符号的位置，其取值如下 所示：
体如下表所示。
type 属性值 disc （默认值） circle square
显示效果 ● ○ ■
注意 : ? 不赞成使用无序列表的 type 属性，一般通过 CSS样式属性替代。 ? <li> 与</li> 之间相当于一个容器，可以容纳所有元素。但是 <ul></ul> 中只能嵌套
<li></li> ，直接在 <ul></ul> 标记中输入文字的做法是不被允许的。
不显示任何符号
5.2 CSS 控制列表样式
? 5.2.1 list-style-type 属性
注意: ? 在实际网页制作过程中，各个浏览器对list-style-type属性的解析不同。因此，
不推荐使用list-style-type属性。
5.2 CSS 控制列表样式
? 5.2.2 list-style-image 属性
? 使用复合属性list-style时，通常按上面语法格式中的顺序书写，各 个样式之间以空格隔开，不需要的样式可以省略。
? 值得一提的是，在实际网页制作过程中，为了更高效地控制列表 项目符号，通常将list-style的属性值定义为none，然后通过为<li> 设置背景图像的方式实现不同的列表项目符号。
5.1 列表标记
? 5.1.2 有序列表ol
? 在有序列表中，除了type属性之外，还可以为<ol>定义start属性
、为<li>定义value属性，它们决定有序列表的项目符号，其取值
和含义如下表所示。
属性 type
start value
属性值 1（默认） a或A i或I 数字 数字
描述 项目符号显示为数字 1 2 3… 项目符号显示为英文字母 a b c d… 或A B C… 项目符号显示为罗马数字 i ii iii… 或I II III… 规定项目符号的起始值 规定项目符号的数字
...... </ ul>
? 在上面的语法中，<ul></ul>标记用于定义无序列表，<li></li>标记 嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul> 中至少应包含一对<li></li>。
5.1 ቤተ መጻሕፍቲ ባይዱ表标记
? 5.1.1 无序列表ul
? 无序列表中type属性的常用值有三个，它们呈现的效果不同，具