第7章--用CSS设置链接和导航菜单.ppt

网页设计与制作教程（HTML+CSS+JavaScript） 机械工业出版社同名教材 配套电子教案 * * 7.1 用CSS设置链接 7.2 用CSS设置列表 7.3 创建导航菜单 7.4 用CSS设置链接与导航菜单综合案例 第7章 用CSS设置链接与导航菜单 7.1.1 超链接伪类 超链接涉及到一个新的概念——伪类。首先了解一下超链接的4种样式： a:link {color: #ff0000} /* 未访问的链接 */ a:visited {color: #00ff00} /* 已访问的链接 */ a:hover {color: #ff00ff} /* 鼠标悬停到链接上 */ 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.2 改变文字链接的外观 为了更清楚地理解如何使用CSS设置文字链接的外观，下面讲解一个简单的示例。 【演练7-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b）所示。 7.1 用CSS设置链接 7.1.2 改变文字链接的外观 【演练7-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html在浏览器中显示的效果如图7-2所示。 7.1 用CSS设置链接 7.1.2 创建按钮式超链接 按钮式超链接的实质就是将超链接样式的4个边框的颜色分别进行设置，左和上设置为加亮效果，右和下设置为阴影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相反。 【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图7-3所示。 7.1 用CSS设置链接 7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4（a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示。 7.1 用CSS设置链接 7.2.1 设置列表类型 通常的项目列表主要采用<ul>或<ol>标签，然后配合<li>标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是<ul>标记还是<ol>标记，都可以使用相同的属性值，而且效果是完全相同的。 【演练7-5】设置列表类型，本例页面7-5.html的显示效果如图7-7所示。 7.2 用CSS设置列表 7.2.2 设置列表项图像 list-style-image属性主要使用图像来替换列表项的标记，当list-style-image属性的属性值为none或者设置的图片路径出错时，list-style-type属性会替代list-style-image属性对列表产生作用。 【演练7-7】设置列表项图像，本例页面7-7.html的显示效果如图7-11所示。 7.2 用CSS设置列表 7.2.4 图文信息列表 网页中经常可以看到图文信息列表，如图7-13所示。之所以称为图文信息列表，是因为列表的内容是以图片和简短语言的形式呈现在页面中。 【演练7-9】使用图文信息列表制作电脑商城热销笔记本页面局部信息，本例页面7-9.html的显示效果如图7-14所示。 7.2 用CSS设置列表 7.3.1 普通的超链接导航菜单 普通的超链接导航菜单的制作比较简单，主要采用将文字链接从“内联元素”变为“块级元素”的方法来实现。 【演练7-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图7-18（a）所示，鼠标悬停在菜单项上时效果如图7-18（b）所示。 7.3 创建导航菜单 7.3.2 纵向列表模