单元9设计页面类网页特效

1、任务任务9-1 实现页面换肤网页特效实现页面换肤网页特效任务任务9-2 根据日期特征动态切换背景根据日期特征动态切换背景 浏览网页浏览网页0902.html的外观效果如图的外观效果如图9-2所所示，该网页会根据日期特征动态切换背景。示，该网页会根据日期特征动态切换背景。图图9-2浏览网页浏览网页0902.html的外观效果的外观效果【知识必备】【知识必备】【引导训练】【引导训练】任务任务9-3 根据屏幕宽度自动设置根据屏幕宽度自动设置网页背景和导航栏网页背景和导航栏【任务描述】【任务描述】 网页网页0903.html中导航栏的部分内容中导航栏的部分内容和网页背景如图和网页背景如图9-3所示。所

2、示。 编写代码实现根据屏幕宽度自动设编写代码实现根据屏幕宽度自动设置网页背景和导航栏的功能。置网页背景和导航栏的功能。图图9-3网页网页0903.html中导航栏的部分中导航栏的部分内容和网页背景内容和网页背景【任务描述】【任务描述】 在网页在网页0902.html中，编写代码实现以下中，编写代码实现以下功能。功能。 （1）当滚动条向下滑动到一定的距离时，自动）当滚动条向下滑动到一定的距离时，自动显示如图显示如图9-4所示的快捷导航菜单。反之，当所示的快捷导航菜单。反之，当滚动条向上滑动到小于一定的距离时自动隐滚动条向上滑动到小于一定的距离时自动隐藏该快捷导航菜单。藏该快捷导航菜单。 （2）单

3、击）单击“回到顶部回到顶部”超链接时返回页面超链接时返回页面顶部。顶部。 （3）在该快捷导航菜单中单击超链接）在该快捷导航菜单中单击超链接“分分类导航类导航”可折叠其下方的相关内容，如图可折叠其下方的相关内容，如图9-5所示。所示。图图9-4网页网页0902.html中的快捷导航菜单中的快捷导航菜单图图9-5网页网页0902.html中折叠分类导航内容中折叠分类导航内容【任务描述】【任务描述】 浏览网页浏览网页0905.html时，其初始状态时，其初始状态如图如图9-6所示，单击所示，单击“切换切换”超链接时打超链接时打开下拉窗口，如图开下拉窗口，如图9-7所示，鼠标指针离所示，鼠标指针离开即

4、可自动隐藏该下拉窗口。开即可自动隐藏该下拉窗口。图图9-6浏览网页浏览网页0905.html的初始状态的初始状态图图9-7在网页在网页0905.html中单击中单击“切换切换”超链接时打开下拉窗口超链接时打开下拉窗口【任务描述】【任务描述】 浏览网页浏览网页0906.html时，当向下滚动滚动时，当向下滚动滚动条到一定距离时，自动显示条到一定距离时，自动显示“返回顶部返回顶部”导导航栏，如图航栏，如图9-8所示。所示。 单击该导航栏则自动返回顶部。单击该导航栏则自动返回顶部。 当向上滚动滚动条小于一定距离时，自当向上滚动滚动条小于一定距离时，自动隐藏该导航栏。动隐藏该导航栏。图图9-8网页网页

5、0906.html中的中的“返回顶部返回顶部”导航栏导航栏【同步训练】【同步训练】任务任务9-7 选购商品时打开购物车页面选购商品时打开购物车页面【任务描述】【任务描述】 在购物网站中选购商品后，单击超链接在购物网站中选购商品后，单击超链接 “加入购物车加入购物车”即可打开购物车页面，并将所即可打开购物车页面，并将所 选商品的信息添加到购物车页面。选商品的信息添加到购物车页面。【任务描述】【任务描述】 浏览网页浏览网页0908.html时，其初始状态时，其初始状态如图如图9-9所示。所示。 初始状态的图片是随机选择的，当初始状态的图片是随机选择的，当鼠标指针指向数字按钮时，动态切换页鼠标指针指

6、向数字按钮时，动态切换页面背景，如图面背景，如图9-10所示。所示。图图9-9浏览网页浏览网页0908.html时的初始状态时的初始状态图图9-10动态切换网页动态切换网页0908.html的页面背景的页面背景【任务描述】【任务描述】 网页网页0909.html对应对应HTML代码如下所代码如下所示，即在该网页的示，即在该网页的“fullCell”区域中以浮区域中以浮动框架的方式显示子网页动框架的方式显示子网页0909sub.html中的中的内容。内容。 要求浮动框架的高度自适应页面内要求浮动框架的高度自适应页面内容的高度。容的高度。【任务描述】【任务描述】 浏览网页浏览网页0910.html时，当向下滚动滚动时，当向下滚动滚动条到一定距离时，自动显示条到一定距离时，自动显示“返回顶部返回顶部”导导航栏，如图航栏，如图9-11所示。所示。 单击该导航栏则自动返回顶部。单击该导航栏则自动返回顶部。 当向上滚动滚动条小于一定距离时，自当向上滚动滚动条小于一定距离时，自动隐藏该导航栏。动隐藏该导航栏。图图9-11网页网页0910.html中的中的“返回顶部返回顶部”导航栏导航栏【任务描述】【任务描述】 网页网页0911.html中的促销预报月历如图中的促销预报月历如图9-12所示，当鼠标指针指向特别标记处时所示，当鼠标指针指向特别标记处时自动显示促销信息，如图自动显示促销信