(精品)CSS高级特效

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,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.getElementById(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,属性实现页面元素的显示和隐藏,处理鼠标的,onmouseover,事件和,onmouseout,事件,需求说明,制作,51job,校园招聘栏目的搜索版块的,Tab,切换特效,阶段,1,完成时间,20,分钟,参考代码,实现思路,使用,DIV+CSS,定义,Tab,结构的标题、内容及,Tab,页脚部分,编写,Tab,样式规则，定义,Tab,元素的外观,使用脚本处理,Tab,的,onmouseover,和,onmouseout,事件，在鼠标事件中动态设置,display,属性,阶段,1,需求说明,练习使用,className,属性动态切换样式规则,参考代码,完成时间,20,分钟,阶段,1,需求说明,制作个人加油站,Tab,特效，实现,Tab,手动切换和系统自动切换特效,参考代码,完成时间,25,分钟,小结,总结常见问题及解决办法,共性问题集中讲解,阶段,2,训练内容,使用,getElementById,访问页面元素,使用,display,属性动态显示、隐藏页面元素,使用,position:absolute,定位元素位置,需求说明,制作,51job,选择工作地点的遮罩层特效,阶段,2,完成时间,25,分钟,参考代码,实现思路,使用,div,定义遮罩层，遮罩层的大小要大于等于屏幕的尺寸,使用,div,定义弹出层，制出弹出层中的工作地点选择列表,遮罩层的,z-index,属性值小于弹出层的,z-index,属性值,使用脚本动态设置遮罩层和弹出层的,display,属性值,阶段,2,需求说明,参照指导部分的内容，制作快速搜索,Tab,的日期选择功能,参考代码,完成时间,20,分钟,总结,总结并布置作业,