web开发日志css定义与JS

1、项目1类的应用divwidth:60px;height:60px;background-color: #7FFF00;border-radius: 50%; float:left; margin-left: 10px;/div显示出来前面的不能加./类定义前面加.boxwidth:372px; height:494px ;overflow: hidden;position: relative;top: 60px;left:50%/box是盒子只能放一张图片 overflow 多余超出隐藏 position 相对父级移动的位置 图片的位置居中.click span float:left;marg

2、in-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 是相对于页面的上下左右的变化彼此之间的距离/div 和span 加上浮动都是一样的标签 /一个父级框起来可以一起定义效果$(img).hide()/一开始没有图像$(span:eq(

3、0).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()$(img:eq(1).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(

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

5、s().css(backgroundColor:red)$(span:eq(4).click(function()$(img:eq(4).show()$(img:eq(4).siblings().hide()$(this).css(backgroundColor:yellow)$(this).siblings().css(backgroundColor:red)项目2 Css的应用.text1 background-color:white;.text1 figcaption padding:20px;.text1 figcaption pbackground-color:#FFF;margin

6、 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:hoverimgopacity:0.5;transform:translate(-50p

7、x,0);/css层叠样式 引用一个text类定义就包括了所有的动效/text1 是声明 这些是写在body里面的第一标题 图片注解 图片注解 图片注解/figure是父级包括了figcaption.box5background-color:blanchedalmond ;.boxheight: 100px;.box2background-color:blanchedalmond ;.box3 font-size:50px;.box5background-color:blanchedalmond ;文字$(.box5).css(color:red,fontSize: 34)/新定义css样式项

8、目3$(div).width();/width宽度（）没写是捕获 写了是设置document.title=$(div).width()/document 头部内容是用来检测变化的$(div).height();/height 高度document.title=$(div).height() helloworld/padding 内边距 padding-top 从上往下 hin 细线 medium 中粗线 thick 粗线 边框类型 none 无边框 dotted 点组成 dashed 由短线 solid 实线 double 双线 groove 3d沟槽 颜色$(div).outerHeight

9、();/包含填充padding 和边框document.title=$(div).outerHeight()heoworld/margin 外边距 margin “20px 40px” top bottom20px right left 40px 20 40 60 80 top right bottom left$(div).outerHeight(true);/true 填充 边框 边界都包含document.title=$(div).outerHeight(true) helloworld$(div).innerHeight(true);/innerHeight 带padding值的高度d

10、ocument.title=$(div).innerHeight(true)项目4/JS 声明类型 不需要调用库 直接输出就可以 用于if语句 轮播 函数类型 var i=1/ VAR 和变量之间要有空格 var 变量名=数值i=i+1document.title=ialert(hello)/弹窗var a=confirm(are your sure?)/布尔 TRUE falsedocument.title=a;var b=prompt(please input your name, 0);/可输入文本 字符用引号包含document.title=your name are+b;/运行从上往

11、下 变量运算 + - * / 比较运算 = != =项目5alert(hello)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 /语句后不能加分号 分号在外可以加项目6document.getElementById(box).style.height=100p

12、xdocument.getElementById(box).style.width=100pxdocument.getElementById(box).style.backgroundColor=blanchedalmond#boxwidth: 372px;height: 494px;/必须定义style盒子图片 捕获样式/类调用var i=prompt(请输入你的对象,0)if(i=1)document.getElementById(box).style.backgroundImage=url(img/p_1.png)/if（）两个= style 相当于调用css js图片必须有url 显示

13、在弹出的窗口 捕获属性样式else if(i=2)document.getElementById(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)else if(i=5)document.getEle

14、mentById(box).style.backgroundImage=url(img/p_5.png)elsealert(输入错误定义)/最后的else 没有（）小括弧imgdisplay: none;/背景有大小才显示var a=prompt(input you favorite number,0)document.getElementsByTagName(img).item(a-1).style.display=block/驼峰写法 a-1表示第一个 捕获标签 每个都要加.var a=prompt(input you favorite number,0)/prompt 中的a变量就是键盘

15、输入的文本if(a=5)document.getElementsByTagName(img).item(a-1).style.display=blockelsealert(worry number)项目7var 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/数组盒子包着变量项目8imgdisplay: none

16、;/用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 省略了/JS的定义onclick 单击 onblur 失去焦点 onmousemove鼠标移入 onkeyup 按键弹起function dianji()/可以多次回调alert(这个类型不能用)/事件dianji()/不能是click 和库重复项目9imgdisplay: none;function tanchu(