web开发日志1.doc

经验1 html head style .box{width: 200px;height: 200px;background-color: blue;//宽度高度颜色transform://transform起始调用的有 translate(100px 200px); -webkit-transform:// -webkit-transform 兼容性识别移过去的 translate(100px 200px);//translate 位移跟两个值100px逆时针x轴200pxy轴transform:rotate(45deg);-webkit-transform:rotate(45deg);//rotate 角度deg 顺时针横纵单独挪-webkit-transform-origin: 0 0; //origin 中心定位点 center 0 0 中间空格 x轴与y轴的位置-webkit-transform: scale(0.5);//缩放0.5 按比例缩小0.5 -webkit-transform: skew(50deg 50deg);\\斜切角度 x轴斜切50deg skew origin中心点也起作用} -webkit-animation: name 10s ease 5s 2 forwards packwards alternate滑方式 等待5s 2次重复 forwards停在结尾 packwards停在开头 alternate 往返 @-webkit-keyframes name{ 0%{-webkit-transform:translate(0,0);width: 200px;height:200px;}//from 从哪里来 to到哪里去 200px尺寸200像素 100%{-webkit-transform:translate(500px,500px);width:0;height:0;} } /style meta charset=UTF-8 title/title /head body div class=box/div /body /html 经验2 html head style .box{width: 200px;height: 200px;background-color: blue; transition: all background-color 2s ease;}// transition 过度 all全部 2s延迟 鼠标停下 Transition-property检索或设置对象中参与过度的属性 Transition-duration检索或设置对象中的过度持续时间 .box:hover{background-color:black;}//过度 鼠标触发事件 /style meta charset=UTF-8 title/title /head body div class=box/div /body /html 经验3 html head style body,figure,figcaption,p,h3{margin:0;padding: 0;}//空隙重置 *{font-family:微软雅黑;} figure{float left; overflow: hidden;background-color:blanchedalmond;height： 358px;position:relative;}//float： 左浮动 盖住overflow 背景颜色黄色 缝隙多余隐藏无边界 figcaption{position:absolute; top:0;left:0;}//父集 absolute定位飘起来空中架着 figure img{opacity:0.8;transition:all 2s ease;}// 图片 透明度变化 过度形式 figcaption p{transition: all 2s ease;}//P标签 @media only screen and (min-width: 1001px) { figure {width:33.33%;}}//@设置最小宽度 里面不同内容浮动 大于33.33%放不下 在中间占一半 小于600px 占一张 @media only screen and (min-width: 601px) and (max-width: 1000px) { figure {width:50%;} } @media only screen and (max-width: 600px) { figure {w