机械工业出版社《网页设计与制作基础》第5版

网页设计与制作教程第5版

机械工业出版社同名教材 配套电子教案

机械工业出版社《网页设计与制作基础》第5版

第7章 使用CSS设置链接与导航菜单7.1 使用CSS设置链接 7.2 使用CSS设置列表 7.3 创建导航菜单 7.4 使用CSS设置链接与导航菜单综合案例 7.5 实训——制作什锦果园关于页面

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

7.2 使用CSS设置列表7.2.4 设置列表项位置 list-style-position属性用于设置在何处放置列表项 标记，其属性值只有两个关键词outside(

外部)和inside (内部)。 【演练7-8】设置列表项位置，本例页面7-8.html的显示效 果如图7-12所示。

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

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

机械工业出版社《网页设计与制作基础》第5版

7.4 使用CSS设置链接与导航菜单综合案例7.4.1 页面布局规划

通过成熟的构思与设计，网络鞋城商务服务中心的效果 如图7-28所示，页面布局示意图如图7-29所示。

机械工业出版社《网页设计与制作基础》第5版

7.4 使用CSS设置链接与导航菜单综合案例7.4.2 页面的制作过程

1.前期准备 (1)栏目目录结构 在栏目文件夹下创建文件夹 images 和 css ,分别用来存放图 像素材和外部样式表文件。 (2)页面素材 将本页面需要使用的图像素材存放在文件夹images下。 (3)外部样式表 在文件夹css下新建一个名为style.css的样式表文件。

机械工业出版社《网页设计与制作基础》第5版

7.4 使用CSS设置链接与导航菜单综合案例7.4.2 页面的制作过程

2.制作页面 (1)页面整体的制作 (2)页面顶部的制作

(3)页面广告条及菜单的制作(4)页面中部的制作 (5)页面底部的制作 (6)页面结构代码