CSS样式特效演示文件修改版.pptVIP

第五章 CSS样式特效 回顾 详述getElementById( )的主要功能 详述getElementsByName( )的主要功能 简述制作浮动广告图片的实现思路 简述制作全选/反选多个复选框的实现思路 预习检查 样式规则的语法是什么？用法有哪些 onMouseOver与onMouseOut的区别 inline 、block与none属性分别起什么作用 本章任务 本章目标 会使用style样式属性动态改变边框颜色 会使用className类名属性动态改变按钮背景图片 会使用display显示属性实现层或图片的隐藏/显示和切换特效 回顾已学的CSS样式表-1 样式规则的语法是什么？用法有哪些？ 回顾已学的CSS样式表-2-1 回顾HTML中讲过的CSS样式表，常见的样式有哪些？ 回顾已学的CSS样式表-2-2 回顾已学的CSS样式表-2-3 制作改变字体大小的样式特效 实现思路 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 层的显示/隐藏特效-3 层的显示/隐藏特效-4 小结 3 编写如下图所示，层的显示隐藏特效 图片的显示/隐藏特效-1 如何实现如下图所示的图片切换特效？ 如何获取图片Img对象？ 图片的显示/隐藏特效-2 图片的显示/隐藏特效-3 小结 4 编写如下图所示，图片的显示隐藏特效 总结 请列举常用的样式属性？ 请简述样式特效的实现思路？ 请回答如何改变按钮背景图片的特效？ 请简述层的显示/隐藏与图片的显示/隐藏特效的异同？ * 演示示例2：页面效果 演示示例1：页面效果 演示示例3：页面效果 制作51job的弹出层效果 制作”点卡“图片切换的特效 制作改变边框样式、按钮图片样式的特效 演示示例4：行内样式 演示示例5：内嵌样式 演示示例6：外部样式表 常见 样式 文本属 性样式 背景属 性样式 不带下划 线的超连 接样式 细边 框样式 图片按 钮样式 文本对齐 text-align 设置或检索文本的颜色 color 字体样式 font-style 字体类型 font-family 字体大小 font-size 说 明 文本属性 设置一个指定的图像如何被重复 background-repeat 设置背景图像 background-image 设置背景颜色 background-color 说 明 背景属性 .boxBorder { border-width:1px; border-style:solid; } 细边框样式 A { color: blue; text-decoration: none;} A:hover{ color: red; } 不带下划线的超连接 .picButton{ background-image: url(images/back2.jpg); border: 0px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } 图片按钮样式 说 明 名称 使用了style属性 样式表：font-size 脚本代码：fontSize 演示示例7：改变字号大小的样式特效 练习代码 练习答案 鼠标移入边框颜色变为红色 鼠标移入按钮背景变色 演示示例8：改变样式backgroundImage演示 演示：通过改变样式backImage能否实现？ onMouseOver=this.style.backgroundImage=url(images/back2.jpg); 失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、 padding等样式。即使用多行代码 onmouseOver=this.style