第五章 css样式特效.pptx

《第五章 css样式特效.pptx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第五章css样式特效回顾详述getElementById()的主要功能详述getElementsByName()的主要功能本章案例制作改变边框样式、按钮图片样式的特效制作51job的弹出层效果演示示例1：页面效果演示示例2：页面效果制作“点卡”图片的特效演示示例3：页面效果学习目标会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用display显示属性实现层或图片的隐藏/显示和切换特效一、制作改变边框样式、按钮图片样式的特效细边框样式图片按钮样式超链接样式利用已学的CSS制作表单思考：利用之前的cs

2、s如何设置？1、制作改变字体大小的样式特效实现思路：1、创建改变样式的JavaScript代码this.style.fontSize='24px'this.style.fontSize='14px2、利用鼠标相关事件调用JavaScript代码onMouseOver="this.style.fontSize='24px'“onMouseOut="this.style.fontSize='14px'"利用javascript怎样实现呢？使用了style属性样式表：font-size脚本代码：fontSize2、制作随鼠标移入改变边框色的特效实现思路

3、：onmouseover=“this.style.borderColor=‘red’”onmouseout=“this.style.borderColor=‘’”3、制作改变按钮背景图片的特效鼠标移入按钮背景变色案例一：实现思路：onmouseover="this.style.backgroundImage='url(images/back2.jpg)';this.style.color='red‘“onmouseout="this.style.fontSize='12px';this.style.color=‘‘"如果再设置些别的属性呢？onm

4、ouseover=“this.style.backgroundImage=‘url(images/back2.jpg)’;this.style.color=‘red‘;this.style.color=‘’“解决办法：创建mouseOver和mouseOut两种类样式，然后使用className类属性进行切换onMouseOver="this.className='mouseOverStyle'"onMouseOut="this.className='mouseOutStyle'"如果多个标签需要这个样式呢？是不是把所有的代码复制？使用class

5、Name应用类样式二、层的显示隐藏特效回顾display属性参数值描述block默认值。按块显示，换行显示.用该值为对象之后添加新行none不显示，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。inline按行显示，和其他元素同一行显示。显示属性display适用于所有HTML标签，常用于层DIV、图片img的显示和隐藏点击关闭按钮，图片隐藏点击显示按钮，图片显示案例二：案例三：使用函数的参数，传递超链接的内容修改按钮值：document.myform.placeButton.value=place三、

6、图片的显示/隐藏特效1、编写如下图所示，鼠标移入改变按钮背景图片的特效作业：按钮背景图片改变2、作业：