第5章 列表与超链接.ppt

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