web开发日志css定义与JS_第1页
web开发日志css定义与JS_第2页
web开发日志css定义与JS_第3页
web开发日志css定义与JS_第4页
web开发日志css定义与JS_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、项目1类的应用<style>divwidth:60px;height:60px;background-color: #7FFF00;border-radius: 50%; float:left; margin-left: 10px;</style><meta charset="UTF-8"><title></title></head><body><div></div>/div显示出来前面的不能加.<div></div><div>&l

2、t;/div><div class="div"></div>/类定义前面加.<html><head><script src="jquery.js"></script><style>.boxwidth:372px; height:494px ;overflow: hidden;position: relative;top: 60px;left:50%/box是盒子只能放一张图片 overflow 多余超出隐藏 position 相对父级移动的位置 图片的位置居中.cl

3、ick span float:left;margin-left: 10px;margin-right: 10px; width:10px;height: 10px;background-color: red;border-radius: 50%;overflow: hidden;position: relative;top: 60px;left:50%;/span是点.click span定义了一个类 也是一个框架框起来作用 margin-left right 是相对于页面的上下左右的变化彼此之间的距离</style><meta charset="UTF-8&quo

4、t;><title></title></head><body><div class="click span"><span ></span><span></span><span></span><span></span><span></span>/div 和span 加上浮动都是一样的标签</div> /一个父级框起来可以一起定义效果<br /><div class

5、="box"><img src="img/p_1.png"/><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /></div><script>$("img").hide()/一开始没有图像$("span:eq(0

6、)").click(function()$("img:eq(0)").show()$("img:eq(0)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")/this相对应的是最外面（）里的span)$("span:eq(1)").click(function()$("img:eq(1)").show()$(&qu

7、ot;img:eq(1)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")$("span:eq(2)").click(function()$("img:eq(2)").show()$("img:eq(2)").siblings().hide()$(this).css(backgroundColor:"yellow"

8、)$(this).siblings().css(backgroundColor:"red")$("span:eq(3)").click(function()$("img:eq(3)").show()$("img:eq(3)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")$("span:eq(4)").c

9、lick(function()$("img:eq(4)").show()$("img:eq(4)").siblings().hide()$(this).css(backgroundColor:"yellow")$(this).siblings().css(backgroundColor:"red")</script></body>项目2 Css的应用.text1 background-color:white;.text1 figcaption padding:20px;.text1 figc

10、aption pbackground-color:#FFF;margin 3px;text-align: center; padding:0 10px; transform: translate(-120px,0px);.text1 p:nth-of-type(1)transition-delay:0.3s;.text1 p:nth-of-type(2)transition-delay:0.8s;.text1 p:nth-of-type(3)transition-delay:1.3s;.text1:hover ptransform: translate(0,0);.text1:hoverimg

11、opacity:0.5;transform:translate(-50px,0);/css层叠样式 引用一个text类定义就包括了所有的动效<figure class="text1">/text1 是声明 这些是写在body里面的<img src="img/t017db5f348ce54f090.jpg"/ ><figcaption><h3>第一标题</h3><p> 图片注解</p><p> 图片注解</p><p> 图片注解</p&

12、gt;</figcaption></figure>/figure是父级包括了figcaption.box5background-color:blanchedalmond ;<head><style>.boxheight: 100px;.box2background-color:blanchedalmond ;.box3 font-size:50px;.box5background-color:blanchedalmond ;</style><script src="jquery.js"></scr

13、ipt><meta charset="UTF-8"><title></title></head><body><div class="box5">文字</div><script>$(".box5").css(color:"red",fontSize: 34)/新定义css样式</script></body>项目3<!DOCTYPE html><html><head

14、><script src="jquery.js"></script><meta charset="UTF-8"><title></title></head><body><div style="background-color: blanchedalmond;"></div><script>$("div").width();/width宽度（）没写是捕获 写了是设置document.title

15、=$("div").width()/document 头部内容是用来检测变化的</script></body></html><body><div style="background-color: blanchedalmond;"></div><script>$("div").height();/height 高度document.title=$("div").height()</script></body>&

16、lt;body><div style="background-color: blanchedalmond;padding-top: 15PX; border: 1px solid saddlebrown;"> helloworld</div>/padding 内边距 padding-top 从上往下 hin 细线 medium 中粗线 thick 粗线 边框类型 none 无边框 dotted 点组成 dashed 由短线 solid 实线 double 双线 groove 3d沟槽 颜色<script>$("div&qu

17、ot;).outerHeight();/包含填充padding 和边框document.title=$("div").outerHeight()</script></body><body><div style="background-color: blanchedalmond;padding-top: 15PX; border: 1px solid saddlebrown; margin: 10px;">heoworld</div>/margin 外边距 margin “20px 40px” t

18、op bottom20px right left 40px 20 40 60 80 top right bottom left<script>$("div").outerHeight(true);/true 填充 边框 边界都包含document.title=$("div").outerHeight(true)</script></body><body><div style="background-color: blanchedalmond;padding-top: 15PX;"&

19、gt; helloworld</div><script>$("div").innerHeight(true);/innerHeight 带padding值的高度document.title=$("div").innerHeight(true)</script></body>项目4<body><script type="text/javascript">/JS 声明类型 不需要调用库 直接输出就可以 用于if语句 轮播 函数类型 var i=1/ VAR 和变量之间

20、要有空格 var 变量名=数值i=i+1document.title=i</script></body><body><script type="text/javascript">alert("hello")/弹窗var a=confirm("are your sure?")/布尔 TRUE falsedocument.title=a;var b=prompt("please input your name", "0");/可输入文本 字符用引号包含

21、document.title="your name are"+b;/运行从上往下 变量运算 + - * / 比较运算 > < = != <= >=</script></body>项目5<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">alert("h

22、ello")var a=confirm("are your sure?")var b=prompt("please input your chronically age")if(b>=18)/if （布尔值 true会显示 false 不会显示）document.title="you are "+ b+ " years old"/空格在引号中elsedocument.title="you are too young" /语句后不能加分号 分号在外可以加</script>

23、;</body></html>项目6<body><div id="box"></div><script type="text/javascript">document.getElementById("box").style.height="100px"document.getElementById("box").style.width="100px"document.getElementById(&quo

24、t;box").style.backgroundColor="blanchedalmond"</script></body><html><head><style>#boxwidth: 372px;height: 494px;/必须定义style盒子图片 捕获样式</style><meta charset="UTF-8"><title></title></head><body><div id="box

25、"></div>/类调用<script type="text/javascript">var i=prompt("请输入你的对象","0")if(i=1)document.getElementById("box").style.backgroundImage="url(img/p_1.png)"/if（）两个= style 相当于调用css js图片必须有url 显示在弹出的窗口 捕获属性样式else if(i=2)document.getElementB

26、yId("box").style.backgroundImage="url(img/p_2.png)"/图片的顺序必须一致else if(i=3)document.getElementById("box").style.backgroundImage="url(img/p_3.png)"/if 语句结尾不能有冒号else if(i=4)document.getElementById("box").style.backgroundImage="url(img/p_4.png)"

27、else if(i=5)document.getElementById("box").style.backgroundImage="url(img/p_5.png)"elsealert("输入错误定义")/最后的else 没有（）小括弧</script></body></html><html><head><style>imgdisplay: none;/背景有大小才显示</style><meta charset="UTF-8"

28、><title></title></head><body><img src="img/p_1.png" /><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript&q

29、uot;>var a=prompt("input you favorite number","0")document.getElementsByTagName("img").item(a-1).style.display="block"/驼峰写法 a-1表示第一个 捕获标签 每个都要加.</script></body></html><body><img src="img/p_1.png" /><img src="i

30、mg/p_2.png" /><img src="img/p_3.png" /><img src="img/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript">var a=prompt("input you favorite number","0")/prompt 中的a变量就是键盘输入的文本if(a<=5)document.g

31、etElementsByTagName("img").item(a-1).style.display="block"elsealert("worry number")</script></body>项目7<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript"

32、;>var use=new Array();/定义一个数组盒子use0="土豆"use1="胡萝卜"use2="西红柿"use3="白菜"use4="芹菜"var who=Math.floor(Math.random()*5);/Math.floor 只取整数Math.random取随机数0-1之间 5是范围document.title="今天吃 "+ usewho/数组盒子包着变量</script></body></html>项目8

33、<html><head><style>imgdisplay: none;</style><meta charset="UTF-8"><title></title></head><body><img src="img/p_1.png" /><img src="img/p_2.png" /><img src="img/p_3.png" /><img src="i

34、mg/p_4.png" /><img src="img/p_5.png" /><script type="text/javascript">/用js要事先声明function appear(a) function直接跟括号 没有符号document.getElementsByTagName("img").item(a-1).style.display="block"/ var a=prompt("input you favorite number","0") 原来的函数名 appear 是类型 函数的事件 js比JQfunction（）中多了函数名appear(3)/只用于检测 相当于 a=3

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论