网页设计与制作教程（HTML+CSS+JavaScript） 教学配套课件 刘瑞新 第7章 用CSS设置链接与导航菜单.pdfVIP

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第7章 用CSS设置链接与导航菜单 第7章 用CSS设置链接与导航菜单 7.1 用CSS设置链接 7.1 用CSS设置链接 7.2 用CSS设置列表 7.2 用CSS设置列表 7.3 创建导航菜单 7.3 创建导航菜单 7.4 用CSS设置链接与导航菜单综合案例 7.4 用CSS设置链接与导航菜单综合案例 7.1 用CSS设置链接 7.1 用CSS设置链接 7.1.1 超链接伪类 7.1.1 超链接伪类 超链接涉及到一个新的概念——伪类。首先了解一下超 超链接涉及到一个新的概念——伪类。首先了解一下超 链接的4种样式： 链接的4种样式： a:link color: #ff0000 /* 未访问的链接 */ a:link color: #ff0000 /* 未访问的链接 */ a:visited color: #00ff00 /* 已访问的链接 */ a:visited color: #00ff00 /* 已访问的链接 */ a:hover color: #ff00ff /* 鼠标悬停到链接上 */ a:hover color: #ff00ff /* 鼠标悬停到链接上 */ a:active color: #0000ff /* 激活的链接 */ a:active color: #0000ff /* 激活的链接 */ 超链接伪类的语法如下： 超链接伪类的语法如下： a : link sRules 设置a对象在未被访问前的样式表属性。 a : visited sRules 设置a对象在链接地址已被访问过时的样式表属 性。 a : hover sRules 设置a对象在鼠标悬停时的样式表属性。 a : active sRules 设置a对象在被用户激活（按下鼠标未松手）时 的样式表属性。 7.1 用CSS设置链接 7.1 用CSS设置链接 7.1.2 改变文字链接的外观 7.1.2 改变文字链接的外观 为了更清楚地理解如何使用CSS设置文字链接的外观， 为了更清楚地理解如何使用CSS设置文字链接的外观， 下面讲解一个简单的示例。 下面讲解一个简单的示例。 【演练7-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图7- 【演练7-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图7- 1 （a）所示，鼠标悬停在文字链接上时的效果如图7-1 （b）所示。 1 （a）所示，鼠标悬停在文字链接上时的效果如图7-1 （b）所示。 7.1 用CSS设置链接 7.1 用CSS设置链接 7.1.2 改变文字链接的外观 7.1.2 改变文字链接的外观 【演练7-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接 【演练7-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接 风格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html在浏览 风格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html在浏览 器中显示的效果如图7-2所示。 器中显示的效果如图7-2所示。 7.1 用CSS设置链接 7.1 用CSS设置链接 7.1.2 创建按钮式超链接 7.1.2 创建按钮式超链接 按钮式超链接的实质就是将超链接样式的4个边框的颜 按钮式超链接的实质就是将超链接样式的4个边框的颜 色分别进行设置，左和上设置为加亮效果，右和下设置为阴 色分别进行设置，左和上设置为加亮效果，右和下设置为阴 影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好 影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好 相反。 相反。 【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链 【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链 接类似按钮 “被按下”的效果，如图7-3所示。 接类似按钮 “被按下”的效果，如图7-3所示。 7.1 用CSS设置链接 7.1 用CSS设置链接 7.1.3 图文链接 7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改 网页设计中对文字链接的修饰不仅限于增加边框、修改 背景颜色等方式，还可以利用背景图片将文字链接进一步的 背景颜色等方式，还可以利用背景图片将文字链接进一步的 美化。 美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4 （a）所 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4 （a）