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

1、网页设计与制作教程（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: #0000f

2、f/* 激活的链接 */ 超链接伪类的语法如下： 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）所示，鼠标悬停在文

3、字链接上时的效果如图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所示。,

4、7.1 用CSS设置链接,7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4（a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示。,7.1 用CSS设置链接,7.2.1 设置列表类型 通常的项目列表主要采用或标签，然后配合标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是标记还是标记，都可以使用相同的属性值，而且效果是完全相同的。 【演练7-5】设置列表类型，本例页面7-5.html的显示效果

5、如图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】使用

6、图文信息列表制作电脑商城热销笔记本页面局部信息，本例页面7-9.html的显示效果如图7-14所示。,7.2 用CSS设置列表,7.3.1 普通的超链接导航菜单 普通的超链接导航菜单的制作比较简单，主要采用将文字链接从“内联元素”变为“块级元素”的方法来实现。 【演练7-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图7-18（a）所示，鼠标悬停在菜单项上时效果如图7-18（b）所示。,7.3 创建导航菜单,7.3.2 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。 【演练7-11】制作纵向列表模式的导航菜单，鼠标未悬停

7、在菜单项上效果如图7-22（a）所示，鼠标悬停在菜单项上效果如图7-22（b）所示。,7.3 创建导航菜单,7.3.3 横向列表模式的导航菜单 在设计人员制作网页时，经常要求导航菜单能够在水平方向上显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。 【演练7-12】制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效果如图7-25（a）所示，鼠标悬停在菜单项上效果如图7-25（b）所示。,7.3 创建导航菜单,7.4.1 页面布局规划 通过成熟的构思与设计，电脑社区环保天地页面的效果如图7-28所示，页面布局示意图如图7-29所示。,7.4 用CSS设置链接与导航菜单综合案例,7.4.2 页面的制作过程 1前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和style，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹style下新建一个名为style.css的样式表文件。,7.4 用CSS设置链接与导航菜单综合案例,7.4.2 页面的制作过程 2制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面导航的制作 （4）页面中部的制作 （5）页面底部的制作 （6）页面结构代码,7.4 用CSS设置链接与导航菜单综合