第7章%2B%2B使用CSS设置链接与导航菜单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作教程第5版
机械工业出版社同名教材 配套电子教案
第7章 使用CSS设置链接与导航菜单
7.1 使用CSS设置链接 7.2 使用CSS设置列表 7.3 创建导航菜单 7.4 使用CSS设置链接与导航菜单综合案例 7.5 实训——制作什锦果园关于页面
7.1 使用CSS设置链接
7.1.1 改变文字链接的外观 伪类中通过:link、:visited、:hover和:active来控制
7.3 创建导航wenku.baidu.com单
7.3.1 普通的超链接导航菜单 普通的链接导航菜单的制作比较简单，主要采用将文字
链接从“行级元素”变为“块级元素”的方法来实现。
【演练7-10】制作链接导航菜单，鼠标未悬停在菜单项上时的效果如图7-18 （a）所示，鼠标悬停在菜单项上时的效果如图7-18（b）所示。
7.3 创建导航菜单
7.1 使用CSS设置链接
7.1.2 设置按钮链接 按钮式超链接的实质就是将超链接样式的4个边框的颜
色分别进行设置，左和上设置为加亮效果，右和下设置为阴 影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好 相反。
【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似 按钮“被按下”的效果，如图7-3所示。
习题7
1．综合使用链接和导航菜单技术制作如图7-39所示的页面。 2．综合使用链接和导航菜单技术制作如图7-40所示的页面。
7.2 使用CSS设置列表
7.2.5 图文信息列表 网页中经常可以看到图文信息列表，如图7-13所示。之
所以称为图文信息列表，是因为列表的内容是以图片和简短 语言的形式呈现在页面中。
【演练7-9】使用图文信息列表制作网络鞋城商品展示页面的局部信息， 本例页面7-9.html的显示效果如图7-14所示。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.1 页面布局规划 通过成熟的构思与设计，网络鞋城商务服务中心的效果
如图7-28所示，页面布局示意图如图7-29所示。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
【演练7-7】设置列表项图像，本例页面7-7.html的显示效果如图7-11所 示。
7.2 使用CSS设置列表
7.2.4 设置列表项位置 list-style-position属性用于设置在何处放置列表项
标记，其属性值只有两个关键词outside（外部）和inside （内部）。 【演练7-8】设置列表项位置，本例页面7-8.html的显示效 果如图7-12所示。
的菜单能够在水平方向显示。通过CSS属性的控制，可以实 现列表模式导航菜单的横竖转换。在保持原有HTML结构不变 的情况下，将纵向导航转变成横向导航最重要的环节就是设 置<li>标签为浮动。
【演练7-12】制作网络鞋城主导航菜单，当前页面是“商品”的情况下，“商 品”菜单项背景自动加黑，同时文字变为白色。本例文件7-12.html的页面效果 如图7-25所示。
7.1 使用CSS设置链接
7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景
颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4 （a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示 。
7.2 使用CSS设置列表
7.2.1 表格布局与列表布局的对比 1．表格布局 2．列表布局 使用列表布局来实现新闻列表，不仅结构清晰，而且代
码数量明显减少，如图7-6所示。
7.2 使用CSS设置列表
7.2.2 设置列表类型 通常的项目列表主要采用<ul>或<ol>标签，然后配合
<li>标签罗列各个项目。在CSS样式中，列表项的标志类型 是通过属性list-style-type来修改的，无论是<ul>标记还 是<ol>标记，都可以使用相同的属性值，而且效果是完全相 同的。
链接内容访问前、访问后、鼠标悬停时以及用户激活时的样 式。需要说明的是，这4种状态的顺序不能颠倒，否则可能 会导致伪类样式不能实现。并且这4种状态并不是每次都要 用到，一般情况下只需要定义链接标签的样式以及:hover伪 类样式即可。
【演练 7-1】改变文字链接的外观。本例文件为7-1.html，当鼠标未悬停时文 字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b） 所示。
【演练7-5】设置列表类型，本例页面7-5.html的显示效果如图7-7所示。
7.2 使用CSS设置列表
7.2.3 设置列表项图像 list-style-image属性主要使用图像来替换列表项的标
记，当list-style-image属性的属性值为none或者设置的图 片路径出错时，list-style-type属性会替代list-styleimage属性对列表产生作用。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.2 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面广告条及菜单的制作 （4）页面中部的制作 （5）页面底部的制作 （6）页面结构代码
7.5 实训——制作什锦果园关于页面
【实训】制作什锦果园关于页面，重点练习用CSS设置链 接、列表与导航菜单等相关知识。页面效果如图7-34所示，布 局示意图如图7-35所示。
7.3.2 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因
此可以使用无序列表制作纵向导航菜单。
【演练7-11】制作网络鞋城商品分类纵向导航菜单，本例文件7-11.html的页 面效果如图7-22所示。
7.3 创建导航菜单
7.3.3 横向列表模式的导航菜单 导航菜单不只有纵向排列的形式，许多时候还需要页面
机械工业出版社同名教材 配套电子教案
第7章 使用CSS设置链接与导航菜单
7.1 使用CSS设置链接 7.2 使用CSS设置列表 7.3 创建导航菜单 7.4 使用CSS设置链接与导航菜单综合案例 7.5 实训——制作什锦果园关于页面
7.1 使用CSS设置链接
7.1.1 改变文字链接的外观 伪类中通过:link、:visited、:hover和:active来控制
7.3 创建导航wenku.baidu.com单
7.3.1 普通的超链接导航菜单 普通的链接导航菜单的制作比较简单，主要采用将文字
链接从“行级元素”变为“块级元素”的方法来实现。
【演练7-10】制作链接导航菜单，鼠标未悬停在菜单项上时的效果如图7-18 （a）所示，鼠标悬停在菜单项上时的效果如图7-18（b）所示。
7.3 创建导航菜单
7.1 使用CSS设置链接
7.1.2 设置按钮链接 按钮式超链接的实质就是将超链接样式的4个边框的颜
色分别进行设置，左和上设置为加亮效果，右和下设置为阴 影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好 相反。
【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似 按钮“被按下”的效果，如图7-3所示。
习题7
1．综合使用链接和导航菜单技术制作如图7-39所示的页面。 2．综合使用链接和导航菜单技术制作如图7-40所示的页面。
7.2 使用CSS设置列表
7.2.5 图文信息列表 网页中经常可以看到图文信息列表，如图7-13所示。之
所以称为图文信息列表，是因为列表的内容是以图片和简短 语言的形式呈现在页面中。
【演练7-9】使用图文信息列表制作网络鞋城商品展示页面的局部信息， 本例页面7-9.html的显示效果如图7-14所示。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.1 页面布局规划 通过成熟的构思与设计，网络鞋城商务服务中心的效果
如图7-28所示，页面布局示意图如图7-29所示。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
【演练7-7】设置列表项图像，本例页面7-7.html的显示效果如图7-11所 示。
7.2 使用CSS设置列表
7.2.4 设置列表项位置 list-style-position属性用于设置在何处放置列表项
标记，其属性值只有两个关键词outside（外部）和inside （内部）。 【演练7-8】设置列表项位置，本例页面7-8.html的显示效 果如图7-12所示。
的菜单能够在水平方向显示。通过CSS属性的控制，可以实 现列表模式导航菜单的横竖转换。在保持原有HTML结构不变 的情况下，将纵向导航转变成横向导航最重要的环节就是设 置<li>标签为浮动。
【演练7-12】制作网络鞋城主导航菜单，当前页面是“商品”的情况下，“商 品”菜单项背景自动加黑，同时文字变为白色。本例文件7-12.html的页面效果 如图7-25所示。
7.1 使用CSS设置链接
7.1.3 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景
颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4 （a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示 。
7.2 使用CSS设置列表
7.2.1 表格布局与列表布局的对比 1．表格布局 2．列表布局 使用列表布局来实现新闻列表，不仅结构清晰，而且代
码数量明显减少，如图7-6所示。
7.2 使用CSS设置列表
7.2.2 设置列表类型 通常的项目列表主要采用<ul>或<ol>标签，然后配合
<li>标签罗列各个项目。在CSS样式中，列表项的标志类型 是通过属性list-style-type来修改的，无论是<ul>标记还 是<ol>标记，都可以使用相同的属性值，而且效果是完全相 同的。
链接内容访问前、访问后、鼠标悬停时以及用户激活时的样 式。需要说明的是，这4种状态的顺序不能颠倒，否则可能 会导致伪类样式不能实现。并且这4种状态并不是每次都要 用到，一般情况下只需要定义链接标签的样式以及:hover伪 类样式即可。
【演练 7-1】改变文字链接的外观。本例文件为7-1.html，当鼠标未悬停时文 字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b） 所示。
【演练7-5】设置列表类型，本例页面7-5.html的显示效果如图7-7所示。
7.2 使用CSS设置列表
7.2.3 设置列表项图像 list-style-image属性主要使用图像来替换列表项的标
记，当list-style-image属性的属性值为none或者设置的图 片路径出错时，list-style-type属性会替代list-styleimage属性对列表产生作用。
7.4 使用CSS设置链接与导航菜单综合案例
7.4.2 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面广告条及菜单的制作 （4）页面中部的制作 （5）页面底部的制作 （6）页面结构代码
7.5 实训——制作什锦果园关于页面
【实训】制作什锦果园关于页面，重点练习用CSS设置链 接、列表与导航菜单等相关知识。页面效果如图7-34所示，布 局示意图如图7-35所示。
7.3.2 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因
此可以使用无序列表制作纵向导航菜单。
【演练7-11】制作网络鞋城商品分类纵向导航菜单，本例文件7-11.html的页 面效果如图7-22所示。
7.3 创建导航菜单
7.3.3 横向列表模式的导航菜单 导航菜单不只有纵向排列的形式，许多时候还需要页面