j8CSS样式特效练习.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,CSS样式特效,练习,第,8讲,内容,回顾,请简述getElementById()的主要功能,请简述getElementsByName()的主要功能,请简述制作浮动广告图片的实现思路,请简述制作全选/反选多个复选框的实现思路,2,本讲问题,请简述CSS的样式语法？用法有哪些？,onMouseOver与onMouseOut的区别？,inline、block与none属性分别起什么作用？,3,本,讲,任务,演示示例2：,页面效果,演示示例1：,页面效果,演示示例3：,页面效果,制作51job的弹出层效果,制作“点卡”图片切换的特效,制作改变边框样式、按钮图片样式的特效,4,本,讲,目标,会使用style样式的相关属性动态改变边框颜色,会使用className类名属性动态改变按钮背景图片,会使用display显示属性实现层或图片的隐藏/显示和切换特效,5,回顾已学的CSS样式表-1,样式规则的语法是什么？用法有哪些？,演示示例4：,行内样式,演示示例5：,内嵌样式,演示示例6：,外部样式表,6,回顾已学的CSS样式表-2-1,回顾HTML中讲过的CSS样式表，常见的样式有哪些？,常见,样式,文本属,性样式,背景属,性样式,不带下划,线的超链,接样式,细边,框样式,图片按,钮样式,7,回顾已学的CSS样式表-2-2,文本属性,说 明,font-size,字体大小,font-family,字体类型,font-style,字体样式,color,设置或检索文本的颜色,text-align,文本对齐,背景属性,说 明,background-color,设置背景颜色,background-image,设置背景图像,background-repeat,设置一个指定的图像如何被重复,8,回顾已学的CSS样式表-2-3,名称,说 明,不带下划线的超链接,A color:blue;,text-decoration:none;,A:hover color:red;,细边框样式,.boxBorder,border-width:1px;,border-style:solid;,图片按钮样式,.picButton,background-image:url(images/back2.jpg);,border:0px;,margin:0px;,padding:0px;,height:23px;width:82px;,font-size:14px;,9,回顾已学的CSS样式表-3,制作如下图所示的“回顾样式.html”的页面效果,练习答案,练习代码,细边框样式,图片按钮样式,超链接样式,10,制作改变字体大小的样式特效,实现思路,1、创建改变样式的JavaScript代码,this.style.fontSize=24px,this.style.fontSize=14px,2、利用鼠标相关事件调用JavaScript代码,onMouseOver,=this.style.fontSize=24px,onMouseOut,=this.,style,.fontSize=14px,使用了style属性,样式表：font-size,脚本代码：fontSize,演示示例7：,改变字体大小的样式特效,11,小结 1,请编写如下图所示，实现随鼠标移入改变边框色的效果,练习代码,练习答案,鼠标移入边框颜色变为红色,12,制作改变按钮背景图片的特效-1,如何实现如下图所示，按钮的图片背景效果？,鼠标移入按钮背景变色,13,制作改变按钮背景图片的特效-2,演示示例8：,改变样式backgroundImage演示,演示：通过改变样式backgroundImage能否实现？,onMouseOver=this.style.backgroundImage=url(images/back2.jpg);,失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、padding等样式。即使用多行代码,onMouseOver=this.style.backgroundImage=url(images/back2.jpg);,this.style.boder=0;this.style.padding=0.;,解决办法：创建mouseOver和mouseOut两种类样式，,然后使用className类属性进行切换,14,制作改变按钮背景图片的特效-3,.mouseOverStyle,background-image:url(images/back2.jpg);,color:#CC0099;,border:0px;,margin:0px;,padding:0px;,height:23px;width:82px;,font-size:14px;,.mouseOutStyle,background-image:url(images/back1.jpg);,color:#0000FF;border:0px;margin:0px;,padding:0px;height:23px;width:82px;,font-size:14px;,查看完整代码,定义样式,15,制作改变按钮背景图片的特效-4,查看完整代码,利用鼠标相关事件调用样式代码,使用className应用类样式,16,小结 2,编写如下图所示，鼠标移入改变按钮背景图片的特效,练习代码,练习答案,按钮背景图片改变,17,层的显示/隐藏特效-1,显示属性,display,参数值,描述,block,默认值。按块显示，换行显示.,用该值为对象之后添加新行,none,不显示，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间,inline,按行显示，和其他元素同一行显示,显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏,18,层的显示/隐藏特效-2,如何实现如下图所示的页面上广告层的效果？,显示广告层,隐藏广告层,19,层的显示/隐藏特效-3,1、插入两个层，分别插入对应图片，注意设置两个层的z-index属性,2、写脚本函数，当单击时同时关闭这两个层,20,层的显示/隐藏特效-4,查看完整代码,“弹出、关闭层”,#advLayer position:absolute;,left:62px;top:44px;width:367px;height:194px;z-index:2;,function closeMe(),document.getElementById(advLayer).,style.display=none,;,function showMe(),document.getElementById(advLayer).,style.display=block,;,隐藏id为advLayer的层,显示id为advLayer的层,单击事件调用closeMe()方法,21,层的显示/隐藏特效-5,查看完整代码,#advLayer,position:absolute;left:5px;top:101px;width:100px;height:224px;z-index:1;,#closeLayer,position:absolute;left:70px;top:329px;width:35px;height:22px;z-index:2;,function closeMe(),document.getElementById(closeLayer).style.display=none;,document.getElementById(advLayer).,style.display=none;,单击事件调用closeMe()方法,获取层对象,显示属性,22,小结 3,编写如下图所示，层的显示隐藏特效,练习代码,练习答案,使用函数的参数，传递超链接的内容,修改按钮值：document.myform.placeButton.value=place,23,图片的显示/隐藏特效-1,如何实现如下图所示的图片切换特效？,如何获取图片Img对象？,24,图片的显示/隐藏特效-2,1、可以使用DIV中插入图片来实现，但更简洁的办法是,直接使用图片的display属性,2、访问图片Img对象的方法：,document.getElementById(图片ID),25,图片的显示/隐藏特效-3,function InitImage(),document.getElementById(gameTab2).style.display=none;,document.getElementById(game).style.display=none;,document.getElementById(mobileTab1).style.display=none;,function showGame(),document.getElementById(gameTab1).style.display=none;,document.getElementById(gameTab2).style.display=block;,document.getElementById(game).style.display=block;,document.getElementById(mobile).style.display=none;,document.getElementById(mobileTab2).style.display=none;,document.getElementById(mobileTab1).style.display=block;,隐藏id为gameTab1的层,显示id为gameTab2的层,点卡图片切换特效,查看完整代码,26,小结 4,编写如下图所示，图片的显示隐藏特效,练习代码,练习答案,提问：这两段代码重复很多，能否进行简化？,27,图片的显示/隐藏特效-4,可以，使用有参函数来实现，实现代码如下：,function InitImage(),document.getElementById(gameTab2).style.display=none;,document.getElementById(game).style.display=none;,document.getElementById(mobileTab1).style.display=none;,function,TabChange(show,hidden),document.getElementById(show).style.display=block;,document.getElementById(hidden).style.display=none;,document.getElementById(show,+,Tab1).style.display=none;,document.getElementById(show,+,Tab2).style.display=block;,document.getElementById(hidden,+,Tab1).style.display=block;,document.getElementById(hidden,+,Tab2).style.display=none;,定义有参函数,同其他语言一样表示字符串连接,调用有参函数,28,总结,请列举常用的样式属性？,请简述样式特效的实现思路？,请回答如何改变按钮背景图片的特效？,请简述层的显示/隐藏与图片的显示/隐藏特效的异同？,29,