第5章-列表与超链接PPT.ppt

《第5章-列表与超链接PPT.ppt》由会员分享，可在线阅读，更多相关《第5章-列表与超链接PPT.ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效第五章 列表与超链接列表标记超链接标记列表样式的控制CSS伪类让IT教学更简单，让IT学习更有效 目录5.15.1列表标记5.25.2CSS控制列表样式5.35.3超链接标记5.45.4链接伪类控制超链接5.55.5阶段案例-制作新闻列表让IT教学更简单，让IT学习更有效5.1.1 无序列表无序列表ul无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：在上面的语法中，标记用于定义无序列表，标记嵌套在标记中，用于描述具体的列表项，每对中至少应包含一对。列表项1列表项2列表项3.5.1 列表标记让IT教学更简

2、单，让IT学习更有效5.1 列表标记5.1.1 无序列表无序列表ul无序列表中type属性的常用值有三个，它们呈现的效果不同，具体如下表所示。注意注意:不赞成使用无序列表的不赞成使用无序列表的type属性，一般通过属性，一般通过CSS样式属性替代。样式属性替代。与与之间相当于一个容器，可以容纳所有元素。但是之间相当于一个容器，可以容纳所有元素。但是中只能嵌套中只能嵌套，直接在，直接在标记中输入文字的做法是不被允许的标记中输入文字的做法是不被允许的。type属性值属性值显示效果显示效果disc（默认值）circlesquare让IT教学更简单，让IT学习更有效5.1 列表标记5.1.2 有序列表

3、有序列表ol有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：在上面的语法中，标记用于定义有序列表，为具体的列表项，和无序列表类似，每对中也至少应包含一对。列表项1列表项2列表项3.让IT教学更简单，让IT学习更有效5.1 列表标记5.1.2 有序列表有序列表ol在有序列表中，除了type属性之外，还可以为定义start属性、为定义value属性，它们决定有序列表的项目符号，其取值和含义如下表所示。注意注意:各浏览器对有序列表的各浏览器对有序列表的type和和value属性的解析不同。属性的解析不同。不赞成使用不赞成使用的的type、start和和v

4、alue属性，属性，可可通过通过CSS样式替代。样式替代。属性属性属性值属性值描述描述type1（默认）项目符号显示为数字123a或A项目符号显示为英文字母abcd或ABCi或I项目符号显示为罗马数字iiiiii或IIIIIIstart数字规定项目符号的起始值value数字规定项目符号的数字让IT教学更简单，让IT学习更有效5.1 列表标记5.1.3 定义列表定义列表dl定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：名词1名词1解释1名词1解释2.名词2名词2解释1名词2解释2.让IT教学更简单，让IT学习更有效5.1 列表标记5.1.3 定义列

5、表定义列表dl在上面的语法中，标记用于指定定义列表，和并列嵌套于中，其中，标记用于指定术语名词，标记用于对名词进行解释和描述。一对可以对应多对，即可以对一个名词进行多项解释。让IT教学更简单，让IT学习更有效5.1 列表标记5.1.4 列表的嵌套应用列表的嵌套应用在使用列表时，列表项中可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套。让IT教学更简单，让IT学习更有效5.2 CSS控制列表样式5.2.1 list-style-type属性属性list-style-type属性用于控制无序和有序列表的项目符号，其取值有多种，如下表所示。列表类型列表类型属性值属性值显示效果显示

6、效果无序列表（ul）disccirclesquare有序列表（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.、公共属性none不显示任何符号让IT教学更简单，让IT学习更有效5.2 CSS控制列表样式5.2.1 list-style-type属性属性注意注意:在实际网页制作过程中，各个浏览器对list-style-type属性的解析不同。因此，不推荐使用list-style-type属性。让IT教学更简单

7、，让IT学习更有效5.2 CSS控制列表样式5.2.2 list-style-image属性属性list-style-image属性的取值为图像的url（地址）。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。让IT教学更简单，让IT学习更有效5.2 CSS控制列表样式5.2.3 list-style-position属性属性list-style-position属性用于控制列表项目符号的位置，其取值如下所示：linside：列表项目符号位于列表文本以内。loutside：列表项目符号位于列表文本以外（默认值）。让IT教学更简单，让IT学习更有效5.

8、2 CSS控制列表样式5.2.4 list-style属性属性列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。其语法格式如下：使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。值得一提的是，在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为设置背景图像的方式实现不同的列表项目符号。list-style:列表项目符号列表项目符号的位置列表项目图像;让IT教学更简单，让IT学习更有效5.3 超链接标记5.3.1 创建超链接创建超

9、链接在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可，其基本语法格式如下：在上面的语法中，标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对它们进行具体地解释。文本或图像让IT教学更简单，让IT学习更有效5.3 超链接标记5.3.1 创建超链接创建超链接lhref：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。ltarget：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。让IT教学更简单，让IT学习更有效5.3 超链接标记5.3.1 创

10、建超链接创建超链接注意注意:暂时没有确定链接目标时，通常将标记的href属性值定义为“#”(即href=#)，表示该链接暂时为一个空链接。不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。让IT教学更简单，让IT学习更有效脚下留心创建图像超链接时，在某些浏览器中，图像会添加边框效果，影响页面的美观。为了不影响页面的美观，通常需要去掉图像的边框效果，使图像正常显示。去掉链接图像的边框很简单，只需将图像的边框定义为0即可，代码如下所示：让IT教学更简单，让IT学习更有效5.3 超链接标记5.3.2 锚点链接锚点链接通过创建锚点链接，用户能够快速定位到目标内容

11、。创建锚点链接分为两步：l使用“链接文本”创建链接文本。l使用相应的id名标注跳转目标的位置。让IT教学更简单，让IT学习更有效5.4 链接伪类控制超链接在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。超链接标记的伪类有4种，具体如下表所示。超链接标记超链接标记的伪类的伪类含义含义a:linkCSS样式规则;未访问时超链接的状态a:visitedCSS样式规则;访问后超链接的状态a:hoverCSS样式规则;鼠标经过、悬停时超链接的状态a:activeCSS样式规则;鼠标点击不动时超链接的状态让IT教

12、学更简单，让IT学习更有效5.4 链接伪类控制超链接注意注意:同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。让IT教学更简单，让IT学习更有效5.5 阶段案例效果如下图所示。让IT教学更简单，让IT学习更有效 本章小结本章介绍了HTML中两个重要的元素列表与超链接，主要包括列表相关标记、超链接标记、以及如何使用CSS控制列表与超链接的样式。在本章的最后，通过无序列表ul进行布局，然后使用CSS控制列表与超链接的样式，制作出了一个常见的新闻列表。通过本章的学习，读者应该能够熟练地运用列表与超链接熟练地运用列表与超链接组织页面元素组织页面元素。