北大青鸟PPT:CSS样式特效

第四章

CSS样式特效

回顾

•详述getElementById( )的主要功能

•详述getElementsByName( )的主要功能

•简述制作浮动广告图片的实现思路

•简述制作全选/反选多个复选框的实现思路

预习检查

•样式规则的语法是什么？用法有哪些

•onMouseOver与onMouseOut的区别

•inline 、block与none属性分别起什么作用

本章任务

本章目标

•会使用style样式属性动态改变边框颜色

•会使用className类名属性动态改变按钮背景图片

•会使用display显示属性实现层或图片的隐藏/显示和切换特效

回顾已学的CSS样式表-1

样式规则的语法是什么？用法有哪些？

回顾已学的CSS样式表-2-1

回顾HTML中讲过的CSS样式表，常见的样式有哪些？

回顾已学的CSS样式表-2-2

回顾已学的CSS样式表-2-3

回顾已学的CSS样式表-3

•制作如下图所示的“回顾样式.html”的页面效果

制作改变字体大小的样式特效

•实现思路

     1、创建改变样式的JavaScript代码

         this.style.fontSize='24px'

         this.style.fontSize='14px‘

     2、利用鼠标相关事件调用JavaScript代码

         onMouseOver="this.style.fontSize='24px'“

         onMouseOut="this.style.fontSize='14px'"

小结 1

•请编写如下图所示，实现随鼠标移入改变边框色的效果

制作改变按钮背景图片的特效-1

如何实现如下图所示 ，按钮的图片背景效果？

制作改变按钮背景图片的特效-2

制作改变按钮背景图片的特效-3

制作改变按钮背景图片的特效-4

小结 2

编写如下图所示，鼠标移入改变按钮背景图片的特效

层的显示/隐藏特效-1

显示属性display

层的显示/隐藏特效-2

如何实现如下图所示的页面上广告层的效果？

层的显示/隐藏特效-3

层的显示/隐藏特效-4

层的显示/隐藏特效-5

小结 3

编写如下图所示，层的显示隐藏特效

图片的显示/隐藏特效-1

如何实现如下图所示的图片切换特效？

如何获取图片Img对象？

图片的显示/隐藏特效-2

图片的显示/隐藏特效-3

小结 4

编写如下图所示，图片的显示隐藏特效

图片的显示/隐藏特效-4

•可以，使用有参函数来实现，实现代码如下：

总结

•请列举常用的样式属性？

•请简述样式特效的实现思路？

•请回答如何改变按钮背景图片的特效？

•请简述层的显示/隐藏与图片的显示/隐藏特效的异同？