TP05 JavaScript和CSS的交互 ACCP 6.0 S2-4-使用JavaScript增强交互效果 PPT课件.pptVIP

共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 总结 一个图片在浏览器的右侧，当鼠标滚动时，图片随滚动条滚动，如图所示 布置作业 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课时在此添加内容 * 答案是：AB 把所有的答案全部显示，然后请学员找出正确的答案 并说明错误的答案错在哪里，应如何修改 * * * * JavaScript和CSS的交互 第五章 回顾与作业点评 如何在页面上创建一个img标签？ 某页面中有一个5行3列的表格，如何删除第2行，并改变最后1行第1列的内 容？ 某页面中有一个图片，如何设置当鼠标在图片上单击时时，变换为另外一张图片？ 预习检查 CSS样式表有哪几种？ 使用什么属性可以动态的改变文本的样式？ 使用什么事件可以实现当鼠标移动某文本上时，文本样式改变，当鼠标离开时文本样式恢复为原来的样式？ 本章任务 制作鼠标移动特效 制作随鼠标滚动的广告图片 本章目标 使用style属性制作菜单特效 使用className属性制作菜单特效 使用scrollTop制作随鼠标滚动的广告图片 回顾样式表 样式表的基本语法 标签选择器 ID选择器 类选择器 input{ width:120px; border:solid 1px #ff0000; } #flow{color:#ff0000} .center{ text-align:center; font-weight:bold; } 常见样式 文本属性 背景属性 边框属性 边界属性 填充属性 浮动属性 列表属性 定位属性 类别 名称 描述 文本属性 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 line-height 行高 背景属性 background-color 设置背景颜色 background-image 设置背景图像 background-repeat 设置一个指定的图像如何被重复 类别 属性 描述 文本属性 font-size 字体大小 font-family 字体类型 边框属性 border 设置四个边框所有的属性 border-width 设置边框的宽度 border-style 设置边框的样式 border-color 设置边框的颜色 边界属性 margin 设置所有外边框属性 margin-left margin-right margin-top margin-bottom 分别设置元素的左、右、上、下外边距 填充属性 padding 设置元素的所有内边距 padding-left padding-right padding-top padding-bottom 分别设置元素的左、右、上、下内边距 样式表类型 行内样式 内部样式表 外部样式表 input name=user type=text style=width:100px; border:solid 1px #cccccc; / div style=font-size:13px; font-weight:bold;color:#ff0000红色加粗的字体/div 内部样式表 在head与/head标签之间的style样式 html head title内部样式表/title style type=text/css body{ font-size:12px; line-height:20px; } .video{ margin: 3px; float: left; } /style /head 外部样式表 使用外部样式表 使用link标签链接到外部样式文件 使用@import方法导入外部样式表 html head title外部样式表/title link rel=stylesheet href=style.css type=text/css / /head body …… /body /html 练习-美化会员登录页面 需求说明 使用CSS样式来美化会员登录页面。 页面中字体大小为12px，超链接文本无下划线，当鼠标移动到超链接上时，超链接文本颜色变为红色 会员名和密码在单元格中居右显示 文本输入框显示为细边框样式 登录按钮用图片显示。电子邮箱不能为空 电子邮箱中必须包含符号“@”和“.” 完成时间：25分钟 查看完整代码 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 JavaScript访问样式的常用方法 如何动态改变页面元素的样式？ 使用getElement系列方