列表与超链接ppt课件

第五章列表与超链接 列表标记超链接标记 列表样式的控制CSS伪类 5 1 1无序列表ul无序列表的各个列表项之间没有顺序级别之分 是并列的 其基本语法格式如下 在上面的语法中 标记用于定义无序列表 标记嵌套在标记中 用于描述具体的列表项 每对中至少应包含一对 列表项1列表项2列表项3 5 1列表标记 5 1列表标记 5 1 1无序列表ul无序列表中type属性的常用值有三个 它们呈现的效果不同 具体如下表所示 注意 不赞成使用无序列表的type属性 一般通过CSS样式属性替代 与之间相当于一个容器 可以容纳所有元素 但是中只能嵌套 直接在标记中输入文字的做法是不被允许的 5 1列表标记 5 1 2有序列表ol有序列表即为有排列顺序的列表 其各个列表项按照一定的顺序排列定义 有序列表的基本语法格式如下 在上面的语法中 标记用于定义有序列表 为具体的列表项 和无序列表类似 每对中也至少应包含一对 列表项1列表项2列表项3 5 1列表标记 5 1 2有序列表ol在有序列表中 除了type属性之外 还可以为定义start属性 为定义value属性 它们决定有序列表的项目符号 其取值和含义如下表所示 注意 各浏览器对有序列表的type和value属性的解析不同 不赞成使用的type start和value属性 可通过CSS样式替代 5 1列表标记 5 1 3定义列表dl定义列表常用于对术语或名词进行解释和描述 定义列表的列表项前没有任何项目符号 其基本语法如下 名词1名词1解释1名词1解释2 名词2名词2解释1名词2解释2 5 1列表标记 5 1 3定义列表dl在上面的语法中 标记用于指定定义列表 和并列嵌套于中 其中 标记用于指定术语名词 标记用于对名词进行解释和描述 一对可以对应多对 即可以对一个名词进行多项解释 5 1列表标记 5 1 4列表的嵌套应用在使用列表时 列表项中可能包含若干子列表项 要想在列表项中定义子列表项就需要将列表进行嵌套 5 2CSS控制列表样式 5 2 1list style type属性list style type属性用于控制无序和有序列表的项目符号 其取值有多种 如下表所示 5 2CSS控制列表样式 5 2 1list style type属性 注意 在实际网页制作过程中 各个浏览器对list style type属性的解析不同 因此 不推荐使用list style type属性 5 2CSS控制列表样式 5 2 2list style image属性list style image属性的取值为图像的url 地址 使用list style image属性可以为各个列表项设置项目图像 使列表的样式更加美观 5 2CSS控制列表样式 5 2 3list style position属性list style position属性用于控制列表项目符号的位置 其取值如下所示 inside 列表项目符号位于列表文本以内 outside 列表项目符号位于列表文本以外 默认值 5 2CSS控制列表样式 5 2 4list style属性列表样式也是一个复合属性 可以将列表相关的样式都综合定义在一个复合属性list style中 其语法格式如下 使用复合属性list style时 通常按上面语法格式中的顺序书写 各个样式之间以空格隔开 不需要的样式可以省略 值得一提的是 在实际网页制作过程中 为了更高效地控制列表项目符号 通常将list style的属性值定义为none 然后通过为设置背景图像的方式实现不同的列表项目符号 list style 列表项目符号列表项目符号的位置列表项目图像 5 3超链接标记 5 3 1创建超链接在HTML中创建超链接非常简单 只需用标记环绕需要被链接的对象即可 其基本语法格式如下 在上面的语法中 标记是一个行内标记 用于定义超链接 href和target为其常用属性 下面对它们进行具体地解释 文本或图像 5 3超链接标记 5 3 1创建超链接href 用于指定链接目标的url地址 当为标记应用href属性时 它就具有了超链接的功能 target 用于指定链接页面的打开方式 其取值有 self和 blank两种 其中 self为默认值 blank为在新窗口中打开方式 5 3超链接标记 5 3 1创建超链接 注意 暂时没有确定链接目标时 通常将标记的href属性值定义为 即href 表示该链接暂时为一个空链接 不仅可以创建文本超链接 在网页中各种网页元素 如图像 表格 音频 视频等都可以添加超链接 脚下留心 创建图像超链接时 在某些浏览器中 图像会添加边框效果 影响页面的美观 为了不影响页面的美观 通常需要去掉图像的边框效果 使图像正常显示 去掉链接图像的边框很简单 只需将图像的边框定义为0即可 代码如下所示 5 3超链接标记 5 3 2锚点链接通过创建锚点链接 用户能够快速定位到目标内容 创建锚点链接分为两步 使用 链接文本 创建链接文本 使用相应的id名标注跳转目标的位置 5 4链接伪类控制超链接 在CSS中 通过链接伪类可以实现不同的链接状态 所谓伪类并不是真正意义上的类 它的名称是由系统定义的 通常由标记名 类名或id名加 构成 超链接标记的伪类有4种 具体如下表所示 5 4链接伪类控制超链接 注意 同时使用链接的4种伪类时 通常按照a link a visited a hover和a active的顺序书写 否则定义的样式可能不起作用 除了文本样式之外 链接伪类还常常用于控制超链接的背景 边框等样式 5 5阶段案例 效果如下图所示 本章介绍了HTML中两个重要的元素 列表与超链接 主要包括列表相关标记 超链接标记 以及如何使用CSS控制列表与超链接的样式 在本章的最后 通过无序列表ul进行布局 然后使用CSS控制列表与超链接的样式 制作出了一个常见的新闻列表 通过本章的学习 读者应该能够熟练地运用列表与超链接组织页面元素