分享
分享赚钱 收藏 举报 版权申诉 / 29

类型CSS样式介绍.ppt

  • 上传人:scg750829
  • 文档编号:8168750
  • 上传时间:2019-06-12
  • 格式:PPT
  • 页数:29
  • 大小:2.77MB
  • 配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    CSS样式介绍.ppt
    资源描述:

    1、第四章,CSS样式特效,回顾,详述getElementById( )的主要功能详述getElementsByName( )的主要功能简述制作浮动广告图片的实现思路简述制作全选/反选多个复选框的实现思路,本章任务,演示示例2:页面效果,演示示例1:页面效果,演示示例3:页面效果,制作51job的弹出层效果,制作”点卡“图片切换的特效,制作改变边框样式、按钮图片样式的特效,本章目标,会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用display显示属性实现层或图片的隐藏/显示和切换特效,回顾已学的CSS样式表-1,样式规则的语法是什么?用法有哪些?

    2、,演示示例4:行内样式,演示示例5:内嵌样式,演示示例6:外部样式表,回顾已学的CSS样式表-2-1,回顾HTML中讲过的CSS样式表,常见的样式有哪些?,回顾已学的CSS样式表-2-2,回顾已学的CSS样式表-2-3,回顾已学的CSS样式表-3,制作如下图所示的“回顾样式.html”的页面效果,练习答案,练习代码,细边框样式,图片按钮样式,超链接样式,制作改变字体大小的样式特效,实现思路1、创建改变样式的JavaScript代码this.style.fontSize=24pxthis.style.fontSize=14px2、利用鼠标相关事件调用JavaScript代码onMouseOver

    3、=“this.style.fontSize=24px“onMouseOut=“this.style.fontSize=14px“,使用了style属性,样式表:font-size 脚本代码:fontSize,演示示例7:改变字号大小的样式特效,小结 1,请编写如下图所示,实现随鼠标移入改变边框色的效果,练习代码,练习答案,鼠标移入边框颜色变为红色,制作改变按钮背景图片的特效-1,如何实现如下图所示 ,按钮的图片背景效果?,鼠标移入按钮背景变色,制作改变按钮背景图片的特效-2,演示示例8:改变样式backgroundImage演示,演示:通过改变样式backImage能否实现?,onMouseO

    4、ver=“this.style.backgroundImage=url(images/back2.jpg);“,失败的原因:当鼠标移到按钮上方时,除了图片要换以外,还应保留 border、margin、 padding等样式。即使用多行代码 onmouseOver=“this.style.backImage=url(images/back2.jpg); this.style.boder=0;this.style.padding=0“;,解决办法:创建mouseOver和mouseOut两种类样式, 然后使用className类属性进行切换,制作改变按钮背景图片的特效-3, .mouseOver

    5、Stylebackground-image: url(images/back2.jpg);color:#CC0099; border:0px;margin:0px;padding:0px;height:23px;width: 82px;font-size: 14px; .mouseOutStylebackground-image: url(images/back1.jpg);color:#0000FF; border:0px; margin:0px;padding:0px;height:23px; width:82px;font-size: 14px; ,查看完整代码,定义样式,制作改变按钮背

    6、景图片的特效-4,查看完整代码,利用鼠标相关事件调用样式代码,使用className应用类样式,小结 2,编写如下图所示,鼠标移入改变按钮背景图片的特效,练习代码,练习答案,按钮背景图片改变,层的显示/隐藏特效-1,显示属性display,显示属性display适用于所有HTML标签,常用于层DIV、图片Img的显示和隐藏,层的显示/隐藏特效-2,如何实现如下图所示的页面上广告层的效果?,显示广告层,隐藏广告层,层的显示/隐藏特效-3,1、插入两个层,分别插入对应图片,注意设置两个层的z-index属性,2、写脚本函数,当单击时同时关闭这两个层。,层的显示/隐藏特效-4,查看完整代码,“弹出、

    7、关闭层”, #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的层,单击事件调用loseMe( )方法,层的显示/隐

    8、藏特效-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“).styl

    9、e.display=“none“; ,单击事件调用closeMe( )方法,获取层对象,显示属性,小结 3,编写如下图所示,层的显示隐藏特效,练习代码,练习答案,使用函数的参数,传递超链接的内容,修改按钮值:document.myform.placeButton.value=place,图片的显示/隐藏特效-1,如何实现如下图所示的图片切换特效? 如何获取图片Img对象?,图片的显示/隐藏特效-2,1、可以使用DIV中插入图片来实现,但更简洁的办法是直接使用图片的display属性,2、访问图片Img对象的方法:document.getElementById(“图片ID“),图片的显示/隐藏特

    10、效-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(“g

    11、ameTab2“).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的层,点卡图片切换

    12、特效,查看完整代码,小结 4,编写如下图所示,图片的显示隐藏特效,练习代码,练习答案,提问:这两段代码重复很多,能否进行简化?,图片的显示/隐藏特效-4,可以,使用有参函数来实现,实现代码如下:, function InitImage( )document.getElementById(“gameTab2“).style.display=“none“;document.getElementById(“game“).style.display=“none“;document.getElementById(“mobileTab1“).style.display=“none“; function T

    13、abChange(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“; ,定义有参函数,同其他语言一样“表示字符串连接,调用有参函数,总结,请列举常用的样式属性? 请简述样式特效的实现思路? 请回答如何改变按钮背景图片的特效? 请简述层的显示/隐藏与图片的显示/隐藏特效的异同?,Thanks,

    展开阅读全文
    提示  道客多多所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:CSS样式介绍.ppt
    链接地址:https://www.docduoduo.com/p-8168750.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    道客多多用户QQ群:832276834  微博官方号:道客多多官方   知乎号:道客多多

    Copyright© 2025 道客多多 docduoduo.com 网站版权所有世界地图

    经营许可证编号:粤ICP备2021046453号    营业执照商标

    1.png 2.png 3.png 4.png 5.png 6.png 7.png 8.png 9.png 10.png



    收起
    展开