第七章用CSS设置链接与导航菜单.pptVIP

网页设计与制作教程（HTML+CSS+JavaScript）;7.1 用CSS设置链接 7.2 用CSS设置列表 7.3 创建导航菜单 7.4 用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.2 改变文字链接的外观 为了更清楚地理解如何使用CSS设置文字链接的外观，下面讲解一个简单的示例。 【演练7-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b）所示。;7.1.2 改变文字链接的外观 【演练7-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html在浏览器中显示的效果如图7-2所示。;7.1.2 创建按钮式超链接 按钮式超链接的实质就是将超链接样式的4个边框的颜色分别进行设置，左和上设置为加亮效果，右和下设置为阴影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相反。 【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图7-3所示。;7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4（a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示。;7.2.1 设置列表类型 通常的项目列表主要采用ul或ol标签，然后配合li标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是ul标记还是ol标记，都可以使用相同的属性值，而且效果是完全相同的。 【演练7-5】设置列表类型，本例页面7-5.html的显示效果如图7-7所示。 ;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.4 图文信息列表 网页中经常可以看到图文信息列表，如图7-13所示。之所以称为图文信息列表，是因为列表的内容是以图片和简短语言的形式呈现在页面中。 【演练7-9】使用图文信息列表制作电脑商城热销笔记本页面局部信息，本例页面7-9.html的显示效果如图7-14所示。;7.3.1 普通的超链接导航菜单 普通的超链接导航菜单的制作比较简单，主要采用将文字链接从“内联元素”变为“块级元素”的方法来实现。 【演练7-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图7-18（a）所示，鼠标悬停在菜单项上时效果如图7-18（b）所示。;7.3.2 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。 【演练7-11】制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上效果如图7-22（a）所示，鼠标悬停在菜单项上效果如图7-22（b）所示。;7.3.3 横向列表模式的导航菜单 在设计人员制作网页时，经常要求导航菜单能够在水平方向上显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。 【演练7-12】制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效果如图7-25（a）所示，鼠标悬停在菜单项上效果如图7-25（b）所示。;7.4.1 页面布局规划 通过成熟的构思与设计，电脑社区环保天地页面的效果如图7-28所示，页面布局