web日志jquery语法和网页框架.docVIP

项目1 .text6{background-color:cornflowerblue} .text6 figcaption{ width: 100%; height: 100%;}//定位于图片之上写定位 .text6 figcaption div:nth-of-type(1){margin-left: 15%;} .text6 figcaption div:nth-of-type(2){margin-left: 20%; transition-delay:0.1s; } .text6 figcaption div:nth-of-type(3){ margin-left: 25%; transition-delay:0.3s; } .text6 figcaption p:nth-of-type(1){ margin-top: 10%; margin-left: 15%;transition-delay:0.5s; } .text6 figcaption p:nth-of-type(2){ margin-top: 1%; margin-left: 20%; transition-delay:0.7s; }//margin上下左右像素文字居中 修饰p标签 距离上一个p的位置 保留原始位置不变 absolute参考父集 .text6 figcaption p:nth-of-type(3){ margin-top: 1%; margin-left: 25%;transition-delay:0.8s; } .text6 figcaption div{ border: 1px solid crimson; width: 110px;transform: translate(-300px);} .text6 figcaption p{ transform: translate(-200px);}//figcaption 浮动 .text6:hover figcaption div,.text6:hover p{transform: translate(0); } //translate 只横移动 逗号连起来写 p可以无figcaption .text6:hover img{ opacity: 0.5;}//hover鼠标触发事件 figure class=text6 img src=img/t017ff2f285862ccacf.jpg/ figcaption p图片注解1/p div/div//p标签与div是一样的 p图片注解2/p div/div p图片注解3/p div/div /figcaption /figure 项目2 JQuery 实现交互动效鼠标滑入状态 实现的问题： 1如何接触 2接触对象 3接触后的反应 Html/css是一种语言 Cs/Jquery 是另一种语言 他们是两种不同语言 Html窗体写在body里面 Css的窗体写在style里面 !DOCTYPE html html head style div{width: 100PX;height: 100PX;background-color: blue;} /style script src=jquery.js/script//调用脚本语言 写在内容的下面 Head声明 调用写在里面 meta charset=utf-8 / title/title /head body div/div script $(div).animate({marginLeft:200},2000)//对象加双引号 .表示接触反应 （）里面是对象放的对象div 点注意不能省.事件function（{}）先对括号再对语法 写法和css—不同是驼峰写法 Animate {动画属性}逗号，动画时间 是以ms计算的2000=2s 向右移动 /script /body /html 经验9 html head style div{width:100px; height: 100px;background-color: cadetblue;} /style script src=jquery.js/script meta charset=UTF-8 title/title /head body div文字/div script $(div).prepend（里面)//汉子双引号 $(div).append（里面) $(d