单元9设计页面类网页特效绪论.ppt

单元9 设计页面类网页特效;图9-2　浏览网页0902.html的外观效果;【知识必备】 9.1　正确使用cookie 9.2　正确区分jQuery对象和DOM对象 ; 【引导训练】 任务9-3 根据屏幕宽度自动设置 网页背景和导航栏 【任务描述】 网页0903.html中导航栏的部分内容和网页背景如图9-3所示。 编写代码实现根据屏幕宽度自动设置网页背景和导航栏的功能。 ;图9-3　网页0903.html中导航栏的部分内容和网页背景;任务9-4 页面快捷导航菜单的显示与隐藏; （2）单击“回到顶部”超链接时返回页面顶部。 （3）在该快捷导航菜单中单击超链接“分类导航”可折叠其下方的相关内容，如图 9-5所示。 ;图9-4　网页0902.html中的快捷导航菜单;图9-5　网页0902.html中折叠分类导航内容;任务9-5 下拉窗口的打开与自动隐藏;图9-6　浏览网页0905.html的初始状态;图9-7　在网页0905.html中单击“切换”超链接时打开下拉窗口;任务9-6 滚动屏幕时隐藏或显示返回顶部导航栏;图9-8　网页0906.html中的“返回顶部”导航栏; 【同步训练】 任务9-7 选购商品时打开购物车页面 【任务描述】 在购物网站中选购商品后，单击超链接 “加入购物车”即可打开购物车页面，并将所 选商品的信息添加到购物车页面。 ;任务9-8 动态切换页面背景与调整页面大小;图9-9　浏览网页0908.html时的初始状态;图9-10　动态切换网页0908.html的页面背景;任务9-9 浮动框架的高度自适应页面内容的高度; div class=fullCell iframe id=idxFrame src=0909sub.html frameborder=0 width=100% scrolling=no /iframe /div 要求浮动框架的高度自适应页面内容的高度。 ;任务9-10 随着屏幕高度变化隐藏或显示返回顶部导航栏;图9-11　网页0910.html中的“返回顶部”导航栏;任务9-11 促销信息的显示与隐藏;图9-12　网页0911.html中的促销预报月历;图9-13　网页0911.html中显示促销信息