第7章 使用CSS设置链接与导航菜单 主讲人：刘泰然 经济管理学院.

Presentation on theme: "第7章 使用CSS设置链接与导航菜单 主讲人：刘泰然 经济管理学院."— Presentation transcript:

1 第7章 使用CSS设置链接与导航菜单 主讲人：刘泰然 经济管理学院

2 内 容 概 览 使用CSS设置链接 使用CSS设置列表 创建导航菜单 制作网络书城环保社区页面 使用CSS设置链接与导航菜单

3 7.1 使用CSS设置链接 改变文字链接的外观 伪类中通过:link、:visited、:hover和:active来控制链接内容访问前、访问后、鼠标悬停时以及用户激活时的样式。需要说明的是，这4种状态的顺序不能颠倒，否则可能会导致伪类样式不能实现。并且这4种状态并不是每次都要用到，一般情况下只需要定义链接标签的样式以及:hover伪类样式即可。 【演练 7-1】改变文字链接的外观。本例文件为7-1.html，当鼠标未悬停时文字链接的效果如图7-1（a）所示，鼠标悬停在文字链接上时的效果如图7-1（b）所示。

4 7.1 使用CSS设置链接 设置按钮链接 按钮式超链接的实质就是将超链接样式的4个边框的颜色分别进行设置，左和上设置为加亮效果，右和下设置为阴影效果，当鼠标悬停到按钮上时，加亮效果与阴影效果刚好相反。 【演练7-3】创建按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图7-3所示。

5 7.1 使用CSS设置链接 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演练7-4】图文链接，鼠标未悬停时文字链接的效果如图7-4（a）所示，鼠标悬停在文字链接上时的效果如图7-4（b）所示。

6 7.1 使用CSS设置链接 7.2.1 表格布局与列表布局的对比 1．表格布局 2．列表布局
表格布局与列表布局的对比 1．表格布局 2．列表布局 使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图7-6所示。

7 7.2 使用CSS设置列表 设置列表类型 通常的项目列表主要采用<ul>或<ol>标签，然后配合<li>标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是<ul>标记还是<ol>标记，都可以使用相同的属性值，而且效果是完全相同的。 【演练7-5】设置列表类型，本例页面7-5.html的显示效果如图7-7所示。

8 7.2 使用CSS设置列表 设置列表项图像 list-style-image属性主要使用图像来替换列表项的标记，当list-style-image属性的属性值为none或者设置的图片路径出错时，list-style-type属性会替代list-style-image属性对列表产生作用。 【演练7-7】设置列表项图像，本例页面7-7.html的显示效果如图7-11所示。

9 7.2 使用CSS设置列表 设置列表项位置 list-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词outside（外部）和inside（内部）。 【演练7-8】设置列表项位置，本例页面7-8.html的显示效果如图7-12所示。

10 7.2 使用CSS设置列表 图文信息列表 网页中经常可以看到图文信息列表，如图7-13所示。之所以称为图文信息列表，是因为列表的内容是以图片和简短语言的形式呈现在页面中。 【演练7-9】使用图文信息列表制作网络鞋城商品展示页面的局部信息，本例页面7-9.html的显示效果如图7-14所示。

11 7.3 创建导航菜单 普通的超链接导航菜单 普通的链接导航菜单的制作比较简单，主要采用将文字链接从“行级元素”变为“块级元素”的方法来实现。 【演练7-10】制作链接导航菜单，鼠标未悬停在菜单项上时的效果如图7-18（a）所示，鼠标悬停在菜单项上时的效果如图7-18（b）所示。

12 7.3 创建导航菜单 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。 【演练7-11】制作网络鞋城商品分类纵向导航菜单，本例文件7-11.html的页面效果如图7-22所示。

13 7.3 创建导航菜单 横向列表模式的导航菜单 导航菜单不只有纵向排列的形式，许多时候还需要页面的菜单能够在水平方向显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。在保持原有HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置<li>标签为浮动。 【演练7-12】制作网络鞋城主导航菜单，当前页面是“商品”的情况下，“商品”菜单项背景自动加黑，同时文字变为白色。本例文件7-12.html的页面效果如图7-25所示。

14 7.4 制作网络鞋城驴友天地页面 页面布局规划 通过成熟的构思与设计，网络鞋城驴友天地页面的效果如图6-28所示，页面布局示意图如图6-29所示。

15 7.4 制作网络鞋城驴友天地页面 7.4.2 页面的制作过程 1．前期准备 （1）栏目目录结构
页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹style下新建一个名为style.css的样式表文件。

16 7.4 制作网络鞋城驴友天地页面 7.4.2 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面中部的制作
页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面中部的制作 （4）页面底部的制作 （5）页面结构代码

17 7.5 使用CSS设置链接与导航菜单 7.5.1 页面布局规划
页面布局规划 通过成熟的构思与设计，网络鞋城商务服务中心的效果如图7-28所示，页面布局示意图如图7-29所示。

18 7.5 使用CSS设置链接与导航菜单 7.5.2 页面的制作过程 1．前期准备 （1）栏目目录结构
页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。

19 7.5 使用CSS设置链接与导航菜单 7.5.2 页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作
页面的制作过程 2．制作页面 （1）页面整体的制作 （2）页面顶部的制作 （3）页面广告条及菜单的制作 （4）页面中部的制作 （5）页面底部的制作 （6）页面结构代码