1、第5章 上机,CSS高级特效(一),作业点评,理论作业 网易邮箱注册表单动态输入提示,效果演示,作业点评,上机作业 列车时刻查询,/车次查询部分 var orders=new Array(); orders“动车组“=“D1“,“D2“,“D3“,“D4“; orders“快车“=“K3“,“K4“,“K5“,“K6“; orders“普车“=“1008/1009“,“1010/1007“,“1019“; function showOrder() var order =document.getElementById(“order“);var category=document.getEleme
2、ntById(“category“);order.length=1;for(var key in orderscategory.value)var op=new Option();op.text=orderscategory.valuekey;op.value=orderscategory.valuekey;order.options.add(op); ,效果演示,上机内容,页面Tab特效的应用 遮罩层特效的应用,上机目标,制作51job校园招聘栏目的搜索版块 制作51job个人加油站版块,阶段1,训练内容 使用getElementById访问页面元素 使用display属性实现页面元素的显示
3、和隐藏 处理鼠标的onmouseover事件和onmouseout事件 需求说明 制作51job校园招聘栏目的搜索版块的Tab切换特效,阶段1,完成时间20分钟,参考代码,实现思路 使用DIV+CSS定义Tab结构的标题、内容及Tab页脚部分 编写Tab样式规则，定义Tab元素的外观 使用脚本处理Tab的onmouseover和onmouseout事件，在鼠标事件中动态设置display属性,阶段1,需求说明 练习使用className属性动态切换样式规则,参考代码,完成时间20分钟,阶段1,需求说明 制作个人加油站Tab特效，实现Tab手动切换和系统自动切换特效,参考代码,完成时间25分钟,
4、小结,总结常见问题及解决办法,共性问题集中讲解,阶段2,训练内容 使用getElementById访问页面元素 使用display属性动态显示、隐藏页面元素 使用position:absolute定位元素位置 需求说明 制作51job选择工作地点的遮罩层特效,阶段2,完成时间25分钟,参考代码,实现思路 使用div定义遮罩层，遮罩层的大小要大于等于屏幕的尺寸 使用div定义弹出层，制出弹出层中的工作地点选择列表 遮罩层的z-index属性值小于弹出层的z-index属性值 使用脚本动态设置遮罩层和弹出层的display属性值,阶段2,需求说明 参照指导部分的内容，制作快速搜索Tab的日期选择功能,参考代码,完成时间20分钟,总结,总结并布置作业,
