《第7章用CSS设置链接与导菜单.ppt》由会员分享，可在线阅读，更多相关《第7章用CSS设置链接与导菜单.ppt（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作教程（HTML+CSS+JavaScript）顾忠伟顾忠伟顾忠伟顾忠伟GG7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接7.2 7.2 用用用用CSSCSS设置列表设置列表设置列表设置列表7.3 7.3 创建导航菜单创建导航菜单创建导航菜单创建导航菜单7.4 7.4 用用用用CSSCSS设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例第第7章章 用用CSS设置链接与导航菜单设置链接与导航菜单7.1.1 7.1.1 7.1.1 7.1.1 超链接伪类超链接伪类超链接伪类超链接伪类 超链接涉及到一个新的概念
2、超链接涉及到一个新的概念超链接涉及到一个新的概念超链接涉及到一个新的概念伪类。首先了解一下超伪类。首先了解一下超伪类。首先了解一下超伪类。首先了解一下超链接的链接的链接的链接的4 4 4 4种样式：种样式：种样式：种样式：a:link color:#ff0000a:link color:#ff0000a:link color:#ff0000a:link color:#ff0000/*/*/*/*未访问的链接未访问的链接未访问的链接未访问的链接*/a:visited color:#00ff00a:visited color:#00ff00a:visited color:#00ff00a:visi
3、ted color:#00ff00/*/*/*/*已访问的链接已访问的链接已访问的链接已访问的链接*/a:hover color:#ff00ffa:hover color:#ff00ffa:hover color:#ff00ffa:hover color:#ff00ff/*/*/*/*鼠标悬停到链接上鼠标悬停到链接上鼠标悬停到链接上鼠标悬停到链接上*/a:active color:#0000ffa:active color:#0000ffa:active color:#0000ffa:active color:#0000ff/*/*/*/*激活的链接激活的链接激活的链接激活的链接*/超链接伪类
4、的语法如下：超链接伪类的语法如下：超链接伪类的语法如下：超链接伪类的语法如下：a:link sRules 设置a对象在未被访问前的样式表属性。a:visited sRules 设置a对象在链接地址已被访问过时的样式表属性。a:hover sRules 设置a对象在鼠标悬停时的样式表属性。a:active sRules 设置a对象在被用户激活（按下鼠标未松手）时的样式表属性。7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接7.1.2 7.1.2 7.1.2 7.1.2 改变文字链接的外观改变文字链接的外观改变文字链接的外观改变文字链接的外观 为了更清楚地理解如何使用为了更清楚
5、地理解如何使用为了更清楚地理解如何使用为了更清楚地理解如何使用CSSCSSCSSCSS设置文字链接的外观，下设置文字链接的外观，下设置文字链接的外观，下设置文字链接的外观，下面讲解一个简单的示例。面讲解一个简单的示例。面讲解一个简单的示例。面讲解一个简单的示例。【演练演练演练演练7-17-17-17-1】改变文字链接的外观，鼠标未悬停时文字链接的效果如图改变文字链接的外观，鼠标未悬停时文字链接的效果如图改变文字链接的外观，鼠标未悬停时文字链接的效果如图改变文字链接的外观，鼠标未悬停时文字链接的效果如图7-7-7-7-1 1 1 1（a a a a）所示，鼠标悬停在文字链接上时的效果如图）所示，
6、鼠标悬停在文字链接上时的效果如图）所示，鼠标悬停在文字链接上时的效果如图）所示，鼠标悬停在文字链接上时的效果如图7-17-17-17-1（b b b b）所示。）所示。）所示。）所示。7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接 7.1.2 7.1.2 7.1.2 7.1.2 改变文字链接的外观改变文字链接的外观改变文字链接的外观改变文字链接的外观 【演练演练演练演练7-27-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接风制作网页中不同区域的链接效果，鼠标经过导航区域的链接风制作网页中不同区域的链接效果，鼠标经过导航区域的链接风制作网页中不同区域的链接效果，
7、鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，本例文件格与鼠标经过和我联系文字的链接风格截然不同，本例文件格与鼠标经过和我联系文字的链接风格截然不同，本例文件格与鼠标经过和我联系文字的链接风格截然不同，本例文件7-2.html7-2.html在浏览器中在浏览器中在浏览器中在浏览器中显示的效果如图显示的效果如图显示的效果如图显示的效果如图7-27-2所示。所示。所示。所示。7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接 7.1.2 7.1.2 7.1.2 7.1.2 创建按钮式超链接创建按钮式超链接创建按钮式超链接创建按钮式超链接 按钮式超链接的实质就
8、是将超链接样式的按钮式超链接的实质就是将超链接样式的按钮式超链接的实质就是将超链接样式的按钮式超链接的实质就是将超链接样式的4 4 4 4个边框的颜色个边框的颜色个边框的颜色个边框的颜色分别进行设置，左和上设置为加亮效果，右和下设置为阴影分别进行设置，左和上设置为加亮效果，右和下设置为阴影分别进行设置，左和上设置为加亮效果，右和下设置为阴影分别进行设置，左和上设置为加亮效果，右和下设置为阴影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好
9、相反。反。反。反。【演练演练演练演练7-37-37-37-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮接类似按钮接类似按钮接类似按钮“被按下被按下被按下被按下”的效果，如图的效果，如图的效果，如图的效果，如图7-37-37-37-3所示。所示。所示。所示。7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接 7.1.3 7.1.3 7.1.3 7.1.3 图文链接图文链接图文链接图文链接 网页设计中对文
10、字链接的修饰不仅限于增加边框、修改网页设计中对文字链接的修饰不仅限于增加边框、修改网页设计中对文字链接的修饰不仅限于增加边框、修改网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的背景颜色等方式，还可以利用背景图片将文字链接进一步的背景颜色等方式，还可以利用背景图片将文字链接进一步的背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。美化。美化。美化。【演练演练演练演练7-47-47-47-4】图文链接，鼠标未悬停时文字链接的效果如图图文链接，鼠标未悬停时文字链接的效果如图图文链接，鼠标未悬停时文字链接的效果如图图文链接，鼠标未悬停时文字
11、链接的效果如图7-47-47-47-4（a a a a）所示，）所示，）所示，）所示，鼠标悬停在文字链接上时的效果如图鼠标悬停在文字链接上时的效果如图鼠标悬停在文字链接上时的效果如图鼠标悬停在文字链接上时的效果如图7-47-47-47-4（b b b b）所示。）所示。）所示。）所示。7.1 7.1 用用用用CSSCSS设置链接设置链接设置链接设置链接 7.2.1 7.2.1 7.2.1 7.2.1 设置列表类型设置列表类型设置列表类型设置列表类型 通常的项目列表主要采用通常的项目列表主要采用通常的项目列表主要采用通常的项目列表主要采用或或或或标签，然后配合标签，然后配合标签，然后配合标签，然
12、后配合标签罗列各个项目。在标签罗列各个项目。在标签罗列各个项目。在标签罗列各个项目。在CSSCSSCSSCSS样式中，列表项的标志类型是样式中，列表项的标志类型是样式中，列表项的标志类型是样式中，列表项的标志类型是通过属性通过属性通过属性通过属性list-style-typelist-style-typelist-style-typelist-style-type来修改的，无论是来修改的，无论是来修改的，无论是来修改的，无论是标记还是标记还是标记还是标记还是标记，都可以使用相同的属性值，而且效果是完全相同标记，都可以使用相同的属性值，而且效果是完全相同标记，都可以使用相同的属性值，而且效果是完
13、全相同标记，都可以使用相同的属性值，而且效果是完全相同的。的。的。的。【演练演练演练演练7-57-5】设置列表类型，本例页面设置列表类型，本例页面设置列表类型，本例页面设置列表类型，本例页面7-5.html7-5.html的显示效果如图的显示效果如图的显示效果如图的显示效果如图7-77-7所示。所示。所示。所示。7.2 7.2 用用用用CSSCSS设置列表设置列表设置列表设置列表 7.2.2 7.2.2 7.2.2 7.2.2 设置列表项图像设置列表项图像设置列表项图像设置列表项图像 list-style-imagelist-style-imagelist-style-imagelist-st
14、yle-image属性主要使用图像来替换列表项的标属性主要使用图像来替换列表项的标属性主要使用图像来替换列表项的标属性主要使用图像来替换列表项的标记，当记，当记，当记，当list-style-imagelist-style-imagelist-style-imagelist-style-image属性的属性值为属性的属性值为属性的属性值为属性的属性值为nonenonenonenone或者设置的图或者设置的图或者设置的图或者设置的图片路径出错时，片路径出错时，片路径出错时，片路径出错时，list-style-typelist-style-typelist-style-typelist-style
15、-type属性会替代属性会替代属性会替代属性会替代list-style-list-style-list-style-list-style-imageimageimageimage属性对列表产生作用。属性对列表产生作用。属性对列表产生作用。属性对列表产生作用。【演练演练演练演练7-77-77-77-7】设置列表项图像，本例页面设置列表项图像，本例页面设置列表项图像，本例页面设置列表项图像，本例页面7-7.html7-7.html7-7.html7-7.html的显示效果如图的显示效果如图的显示效果如图的显示效果如图7-117-117-117-11所所所所示。示。示。示。7.2 7.2 用用用用C
16、SSCSS设置列表设置列表设置列表设置列表 7.2.4 7.2.4 7.2.4 7.2.4 图文信息列表图文信息列表图文信息列表图文信息列表 网页中经常可以看到图文信息列表，如图网页中经常可以看到图文信息列表，如图网页中经常可以看到图文信息列表，如图网页中经常可以看到图文信息列表，如图7-137-137-137-13所示。之所示。之所示。之所示。之所以称为图文信息列表，是因为列表的内容是以图片和简短所以称为图文信息列表，是因为列表的内容是以图片和简短所以称为图文信息列表，是因为列表的内容是以图片和简短所以称为图文信息列表，是因为列表的内容是以图片和简短语言的形式呈现在页面中。语言的形式呈现在页
17、面中。语言的形式呈现在页面中。语言的形式呈现在页面中。【演练演练演练演练7-97-97-97-9】使用图文信息列表制作电脑商城热销笔记本页面局部信息，使用图文信息列表制作电脑商城热销笔记本页面局部信息，使用图文信息列表制作电脑商城热销笔记本页面局部信息，使用图文信息列表制作电脑商城热销笔记本页面局部信息，本例页面本例页面本例页面本例页面7-9.html7-9.html7-9.html7-9.html的显示效果如图的显示效果如图的显示效果如图的显示效果如图7-147-147-147-14所示。所示。所示。所示。7.2 7.2 用用用用CSSCSS设置列表设置列表设置列表设置列表 7.3.1 7.
18、3.1 7.3.1 7.3.1 普通的超链接导航菜单普通的超链接导航菜单普通的超链接导航菜单普通的超链接导航菜单 普通的超链接导航菜单的制作比较简单，主要采用将文普通的超链接导航菜单的制作比较简单，主要采用将文普通的超链接导航菜单的制作比较简单，主要采用将文普通的超链接导航菜单的制作比较简单，主要采用将文字链接从字链接从字链接从字链接从“内联元素内联元素内联元素内联元素”变为变为变为变为“块级元素块级元素块级元素块级元素”的方法来实现。的方法来实现。的方法来实现。的方法来实现。【演练演练演练演练7-107-107-107-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果制作荧光灯效果的
19、菜单，鼠标未悬停在菜单项上时的效果制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图如图如图如图7-187-187-187-18（a a a a）所示，鼠标悬停在菜单项上时效果如图）所示，鼠标悬停在菜单项上时效果如图）所示，鼠标悬停在菜单项上时效果如图）所示，鼠标悬停在菜单项上时效果如图7-187-187-187-18（b b b b）所示。）所示。）所示。）所示。7.3 7.3 创建导航菜单创建导航菜单创建导航菜单创建导航菜单 7.3.2 7.3.2 7.3.2 7.3.2 纵向列表模式的导航菜单纵向列表模式的导航菜单纵向列表模式的导航菜
20、单纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因由于纵向导航菜单的内容并没有逻辑上的先后顺序，因由于纵向导航菜单的内容并没有逻辑上的先后顺序，因由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。此可以使用无序列表制作纵向导航菜单。此可以使用无序列表制作纵向导航菜单。此可以使用无序列表制作纵向导航菜单。【演练演练演练演练7-117-117-117-11】制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上效制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上效制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上效制作纵向列表模式的导航菜单，鼠标未悬
21、停在菜单项上效果如图果如图果如图果如图7-227-227-227-22（a a a a）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图7-227-227-227-22（b b b b）所示。）所示。）所示。）所示。7.3 7.3 创建导航菜单创建导航菜单创建导航菜单创建导航菜单 7.3.3 7.3.3 7.3.3 7.3.3 横向列表模式的导航菜单横向列表模式的导航菜单横向列表模式的导航菜单横向列表模式的导航菜单在设计人员制作网页时，经常要求导航菜单能够在水平方向在设计人员制作网页时，经常要求导航菜单能够在
22、水平方向在设计人员制作网页时，经常要求导航菜单能够在水平方向在设计人员制作网页时，经常要求导航菜单能够在水平方向上显示。通过上显示。通过上显示。通过上显示。通过CSSCSSCSSCSS属性的控制，可以实现列表模式导航菜单的属性的控制，可以实现列表模式导航菜单的属性的控制，可以实现列表模式导航菜单的属性的控制，可以实现列表模式导航菜单的横竖转换。横竖转换。横竖转换。横竖转换。【演练演练演练演练7-127-127-127-12】制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效制作横向列表模式的导航菜单，鼠标未悬停在菜单项上效制作横向列表模式的导航
23、菜单，鼠标未悬停在菜单项上效果如图果如图果如图果如图7-257-257-257-25（a a a a）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图）所示，鼠标悬停在菜单项上效果如图7-257-257-257-25（b b b b）所示。）所示。）所示。）所示。7.3 7.3 创建导航菜单创建导航菜单创建导航菜单创建导航菜单 7.47.47.47.4.1 .1 .1 .1 页面布局规划页面布局规划页面布局规划页面布局规划 通通通通过过过过成成成成熟熟熟熟的的的的构构构构思思思思与与与与设设设设计计计计，电电电电脑脑脑脑社社社社区区区区环环环
24、环保保保保天天天天地地地地页页页页面面面面的的的的效效效效果果果果如图如图如图如图7-287-287-287-28所示，页面布局示意图如图所示，页面布局示意图如图所示，页面布局示意图如图所示，页面布局示意图如图7-297-297-297-29所示。所示。所示。所示。7.4 7.4 用用用用CSSCSS设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例 7.4.2 7.4.2 7.4.2 7.4.2 页面的制作过程页面的制作过程页面的制作过程页面的制作过程1 1 1 1前期准备前期准备前期准备前期准备（1 1 1 1）栏目目录结构）栏目目录结
25、构）栏目目录结构）栏目目录结构在在在在栏栏栏栏目目目目文文文文件件件件夹夹夹夹下下下下创创创创建建建建文文文文件件件件夹夹夹夹imagesimagesimagesimages和和和和stylestylestylestyle，分分分分别别别别用用用用来来来来存存存存放放放放图图图图像素材和外部样式表文件。像素材和外部样式表文件。像素材和外部样式表文件。像素材和外部样式表文件。（2 2 2 2）页面素材）页面素材）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹imagesim
26、agesimagesimages下。下。下。下。（3 3 3 3）外部样式表）外部样式表）外部样式表）外部样式表在文件夹在文件夹在文件夹在文件夹stylestylestylestyle下新建一个名为下新建一个名为下新建一个名为下新建一个名为style.cssstyle.cssstyle.cssstyle.css的样式表文件。的样式表文件。的样式表文件。的样式表文件。7.4 7.4 用用用用CSSCSS设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例7.4.2 7.4.2 7.4.2 7.4.2 页面的制作过程页面的制作过程页面的制作过程页
27、面的制作过程2 2 2 2制作页面制作页面制作页面制作页面（1 1 1 1）页面整体的制作）页面整体的制作）页面整体的制作）页面整体的制作（2 2 2 2）页面顶部的制作）页面顶部的制作）页面顶部的制作）页面顶部的制作（3 3 3 3）页面导航的制作）页面导航的制作）页面导航的制作）页面导航的制作（4 4 4 4）页面中部的制作）页面中部的制作）页面中部的制作）页面中部的制作（5 5 5 5）页面底部的制作）页面底部的制作）页面底部的制作）页面底部的制作（6 6 6 6）页面结构代码）页面结构代码）页面结构代码）页面结构代码 7.4 7.4 用用用用CSSCSS设置链接与导航菜单综合案例设置链
28、接与导航菜单综合案例设置链接与导航菜单综合案例设置链接与导航菜单综合案例 制作电脑商城网店融资平台页面，页面效果如图制作电脑商城网店融资平台页面，页面效果如图制作电脑商城网店融资平台页面，页面效果如图制作电脑商城网店融资平台页面，页面效果如图7-337-337-337-33所示，所示，所示，所示，布局示意图如图布局示意图如图布局示意图如图布局示意图如图7-347-347-347-34所示。所示。所示。所示。7.57.5 实训实训实训实训 1 1综合使用链接、纵向导航菜单和表单技术制作如图综合使用链接、纵向导航菜单和表单技术制作如图综合使用链接、纵向导航菜单和表单技术制作如图综合使用链接、纵向导航菜单和表单技术制作如图7-7-3535所示的页面。所示的页面。所示的页面。所示的页面。2 2综合使用链接、横向导航菜单和表单技术制作如图综合使用链接、横向导航菜单和表单技术制作如图综合使用链接、横向导航菜单和表单技术制作如图综合使用链接、横向导航菜单和表单技术制作如图7-7-3636所示的页面。所示的页面。所示的页面。所示的页面。习题习题习题习题7 7