20列表与超链接.pptVIP

第 7 章 列表与超链接 ※掌握列表的 CSS 样式设置方法； ※掌握超链接的 CSS 样式设置方法； ※掌握通知公告块和网站导航的制作方法。 第 7 章 列表与超链接 7.1 案例：通知公告块与学院网站导航 知识准备 案例实现 7.2 7.3 德才兼备 知行合一 2 7.1 案例：通知公告块与学院网站导航 德才兼备 知行合一 3 第 7 章 列表与超链接 7.2 知识准备 德才兼备 知行合一 4 7.2.1 列表样式设置 （ 1 ） list-style-type 属性：用于控制无序或有序列表的项目符号，例如， 项目符号的取值有 disc 、 circle 、 square 。 （ 2 ） list-style-image 属性：设置列表项的项目图像，使列表的样式更加 美观，其取值为图像的 URL （地址）。 （ 3 ） list-style-position 属性：设置列表项目符号的位置 ，其取值有 inside 和 outside 两种。 （ 4 ） list-style 属性：综合设置列表样式，可以代替上面三个属性。 格式如下。 list-style: 列表项目符号 列表项目符号的位置 列表项目图像 德才兼备 知行合一 5 7.2.1 列表样式设置 实际上，在网页制作过程中，为了更高效地控制列表项目符号，通常将 list-style 的属性值定义为 none ，清除列表的默认样式。然后通过为 li 设 置背景图像的方式实现不同的列表项目符号。 下面举例说明。 6 7.2.1 列表样式设置 例 7-1 在网页上创建无序列表，并设置列表样式，效果图如下。文件名： 7-1.html 。 代码略。 德才兼备 知行合一 7 7.2.1 列表样式设置 例 7-2 通过自定义列表构造块中内容，并设置 CSS 样式。文件名： 代码略。 德才兼备 知行合一 7-2.html 。 8 7.2.2 超链接样式设置 定义超链接时，为了提高用户体验，经常需要为超链接指定不同 中，通过 链接伪类 可以实现不同的链接状态。 （ 1 ） a:link{CSS 样式规则 ;} ： 未访问时 超链接的状态。 （ 2 ） a:visited{CSS 样式规则 ;} ： 访问后 超链接的状态。 （ 3 ） a:hover{CSS 样式规则 ;} ： 鼠标悬停时 超链接的状态。 （ 4 ） a:active{CSS 样式规则 ;} ： 鼠标单击不动时 超链接的状态。 德才兼备 知行合一 9 的状态，使得超链接在单击前、单击后和鼠标悬停时的样式不同。在 CSS 7.2.2 超链接样式设置 通常在实际应用时，只需要使用 a:link 、 a:visited 来定义未访问 和 访 问 后 的 样 式 ， 而 且 a:link 和 a:visited 定 义 相 同 的 样 式 ； 使 用 a:hover 定义鼠标悬停时超链接的样式即可。有时干脆只定义 a 和 a:hover 的样式。 德才兼备 知行合一 10 例 7-3 7.2.2 超链接样式设置 设置超链接文字的样式。文件名为 7-3.html ，代码略。 德才兼备 知行合一 11 第 7 章 列表与超链接 7.3 案例实现 德才兼备 知行合一 12 7.3 案例实现 案例一：制作通知公告块 具体要求如下。 （ 1 ）块的宽度 width 属性值为 440px 、高度 height 属性值为 265px 。 （ 2 ）块的边框为 1px 、灰色（ #ccc ）、实线。 （ 3 ）标题行采用一级标题、标题行高度为 38px 、文字大小为 20px 。 （ 4 ）所有文字采用微软雅黑字体、文字大小 14px 、文字颜色为灰色 （ #333 ）、行高 28px 、无下划线。 （ 5 ）鼠标移到通知条目文字时文字颜色为蓝色（ #1c4ba9 ）。 德才兼备 知行合一 13 7.3 案例实现 案例二：制作导航条 德才兼备 知行合一 14 7.3 案例实现 案例二：制作导航条 具体要求如下。 （ 1 ）导航条的宽度为 100% ，高度为 42px 。 （ 2 ）导航条的背景颜色为：蓝色 rgb(28,75,169) 。 （ 3 ）每个导航项的宽度为 120px ，高度为 42px ，文字水平居中。 （ 4 ）每个导航项为超链接文字，文字采用微软雅黑体、大小 14 像素、 文字为白色、无下划线。 （ 5 ）鼠标移到超链接文字时，显示白色背景，蓝色文字。 德才兼备 知行合一 15