web开发日志css定义与JS.doc

项目1 类的应用 style div{width: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/div div class=div/div//类定义前面加. html head script src=jquery.js/script style .box{width:372px; height:494px ;overflow: hidden;position: relative;top: 60px;left:50%}//box是盒子只能放一张图片 overflow 多余超出隐藏 position 相对父级移动的位置 图片的位置居中 .click 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 title/title /head body div class=click span span /span span/span span/span span/span span/span//div 和span 加上浮动都是一样的标签 /div //一个父级框起来可以一起定义效果 br / div class=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)).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({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).siblings().css({backgroundColor:red}) } ) $(span:eq(4)).click( function(){ $(img:eq(4)).show