2024年5月16日发(作者：)

《网页设计---用CSS设置丰富的超链接特效》公开课教案

计算机课组 黄荣悦

授课时间：2011年11月14日（第十二周周一第4节）

授课地点：科技楼四楼403室

授课班级：10计算机班

课题：用CSS设置丰富的超链接特效

一、教学目的：通过这节课的学习，在前面所学的用CSS设置文字效果、CSS设置图片效果和CSS设

置网页中的背景的基础上继续深入学习CSS设置超链接效果。本课重点理解超链接标记a和a相对应的

4个伪类别（a:link,a:hover,a:visited,a:active）所表示的不同状态，在此基础上灵活通过对超链接标记a和

a相对应的4个伪类别的CSS规则的编辑，来制作出丰富的超链接特效。

二、教学方法：实例演示分析教学法

三、教学重点：本课重点理解超链接标记a和a相对应的4个伪类别（a:link,a:hover,a:visited,a:active）所

表示的不同状态。

四、教学难点：本课难点在于灵活通过对超链接标记a和a相对应的4个伪类别的CSS规则的编辑，来

制作出丰富的超链接特效。

五、教学过程：

(一)：理解a 的4个伪类别:a:link,a:hover,a:visited,a:active 对应的不同状态。

(二)、简单修改各个伪类别的文字效果和下划线。（以第6章的“个人主页”为例）

a: link{ /* 超链接正常状态下的样式 */

color:#005799; /* 深蓝 */

text-decoration: none; /* 无下划线 */

}

a: visited{ /* 访问过的超链接 */

color:#000000; /* 黑色 */

text-decoration: none; /* 无下划线 */

}

a: hover{ /* 鼠标经过时的超链接 */

color:#FFFF00; /* 黄色 */

text-decoration: underline; /* 下划线 */

}

伪类别

a: link

a: visited

a: hover

a: active

说明

超链接的普通样式，即正常浏览状态的样式

被点击过的超链接的样式

鼠标指针经过超链接上时的样式

在超链接上单击时，即“当前激活”时，超链接的样式

(三)、进一步修改各个伪类别的CSS样式中边框线来制作按钮式特效。（以为例）

a: link, a: visited{

}

a:hover{

}

(四)、配合PS制作出两张同样大小不同颜色的图片，通过修改相应伪类别的CSS样式中的背景图片来

制作出浮雕式特效。（以为例）

a:link,a:visited{

background:url() no-repeat; /*超链接正常、被访问过超链接背景图片 */

}

a:hover{

（五）作业：完成以上3个例子并上交服务器。

background:url() no-repeat; /* 变换背景图片 */

}

/* 鼠标经过时的超链接 */

/* 改变文字位置 （向上左移2px）*/

/* 边框变换，实现“按下去”的效果 */

/* 超链接正常状态、被访问过的样式 */

padding:4px 10px 4px 10px; /*文字位置（上右下左） */

border-top: 2px solid #ffffff;

border-left: 2px solid #ffffff;

border-bottom: 2px solid #000000;

border-right: 2px solid #000000;

/* 边框实现阴影效果 */

padding:6px 8px 2px 12px;

border-top: 2px solid #000000;

border-left: 2px solid #000000;

border-bottom: 2px solid #ffffff;

border-right: 2px solid #ffffff;