网页设计与制作案例教程-电子教案第26单元试验.ppt

实验实验7 7CSSCSS样式与样式与JavaScriptJavaScript技术技术的综合应用的综合应用一实验目的一实验目的（1 1）掌握）掌握样样式的定式的定义义方法和方法和编辑编辑方法。方法。（2 2）掌握如何使用）掌握如何使用CSSCSS样样式表布局网式表布局网页页元素元素以及美化以及美化页页面。面。（3 3）掌握）掌握应应用用JavaScriptJavaScript技技术术制作网制作网页页特特效的常用方法。效的常用方法。二预览效果二预览效果本次本次实验实验的的浏览浏览效果如效果如图图A-10A-10所示。所示。图图A-10鼠标键盘网页的浏览效果鼠标键盘网页的浏览效果三实验内容三实验内容（1 1）在在站站点点“ComputerDiyComputerDiy”根根文文件件夹夹中中新新建建一一个个子子文文件件夹夹“0707实实验验7 7”，在在该该子子文文件件夹夹中中创创建一个命名建一个命名为为“07.html07.html”的网的网页页文档。文档。（2 2）设设置置网网页页07.html07.html的的页页面面属属性性，该该网网页页主主要要应应用用CSSCSS样样式式进进行行布布局局，包包含含了了多多种种嵌嵌套的套的CSSCSS样样式。式。（3 3）利利用用JavaScriptJavaScript技技术术编编写写程程序序代代码码控控制多制多张图张图片片连续连续循循环滚动环滚动。（4 4）利用）利用层层与与JavaScriptJavaScript技技术术相相结结合的方合的方法，法，动态动态控制控制图图片在网片在网页页中的位置。中的位置。四操作提示四操作提示（1）利利用用嵌嵌套套的的CSS样样式式布布局局网网页页，主主要要是是利利用用标记实现标记实现。（2）控控制制多多张张图图片片连连续续循循环环滚滚动动的的程程序序代代码码如下：如下：pscript language=JavaScript p marquees_heightmarquees_height=425;=425;p top_scrolltop_scroll=false;=false;p with(dealer)with(dealer)p p style.widthstyle.width=150;=150;p style.heightstyle.height=marquees_Heightmarquees_Height;p style.overflowXstyle.overflowX=visible;=visible;p style.overflowYstyle.overflowY=hidden;=hidden;p noWrapnoWrap=true;=true;p onmouseoveronmouseover=new=new Function(stop_scrollFunction(stop_scroll=true);=true);p onmouseoutonmouseout=new=new Function(stop_scrollFunction(stop_scroll=false);=false);p pdocument.writedocument.write(div id=templayer2 ();visibility:hidden;top:0px;);p pre_Toppre_Top=0;=0;current_Topcurrent_Top=0;=0;p function function init_setinit_set()()p p templayer2.innerHTML=;templayer2.innerHTML=;p while(templayer2.offsetHeight while(templayer2.offsetHeight marquees_Heightmarquees_Height)p templayer2.innerHTML+=templayer2.innerHTML+=dealer.innerHTMLdealer.innerHTML;p p dealer.innerHTMLdealer.innerHTML=templayer2.innerHTML+=templayer2.innerHTML+templayer2.innerHTML;templayer2.innerHTML;p setInterval(scroll_Up();,40);setInterval(scroll_Up();,40);p pinit_setinit_set();();p function function scroll_Upscroll_Up()()p p if(if(stop_scrollstop_scroll=true)return;=true)return;p pre_Toppre_Top=dealer.scrollTopdealer.scrollTop;p dealer.scrollTopdealer.scrollTop+;+;p if(if(pre_Toppre_Top=dealer.scrollTopdealer.scrollTop)p p dealer.scrollTopdealer.scrollTop=templayer2.offsetHeight-templayer2.offsetHeight-marquees_Heightmarquees_Height;p dealer.scrollTopdealer.scrollTop+;+;p p p