写诊股广告页面遇到的问题

　　前言：入职新公司头一个任务是设计给的移动端的广告图要我做好；我很高兴，有事做了比干坐着强，虽然是个静态图。

我完成后就在思考如何提高自己的技术水平，因为公司大多数的工作都比较简单，前端最重要的项目经验无法获得，没办法提升

自身的价值。——————？？？？

　　还好有度娘可以看前端大神的经验可以学习学习，我决定制定学习计划，写博客，总结小知识，小经验就是开始。

第一个小问题：定位

三个图片定位在一起，刚开始范了个错误由屏幕到小屏幕定位于，一缩小成手机样式就错位；应该由小见大，一般用goole chrome浏览器里的手机屏幕iPhone5尺寸320*568来试；图片重合我尽量不要用position用盒模型

　　方法是：两个包含在一起的div最里面包img，两个div用background:url(图片路径）；一个图大一个图小定位从左上角开始无法用盒模型居中；主要还是margin-top高度塌陷的问题最后用的是position:relative相对定位来搞定；顺便再次复习下定位的知识

　　position(定位）的几种方式：

　　　　relaive(相对定位）--->以自身位置为坐标原点偏移；

　　　　absolute(绝对定位）--->以浏览器左上角为坐标原点进行偏移；

　　　　fixed(固定定位）--->以浏览器左上角为坐标原点进行偏移固定在浏览器坐标上不会随着滚动条而滚动；

　　　　还有static默认值,inherit继承很少用就不说了。

第二个问题：动画

　　要让指针旋转要用到css3中的animation效果了和transform2D转换

.img2 img{

height:100px;

width:100px;

margin-top: 52px;

-webkit-animation: rotating 3s linear infinite;

animation: rotating 3s linear infinite;

 

}

@keyframes rotating{

0% {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}

　　　　　　　　

 

　　　

 

转载于:https://www.cnblogs.com/liaohongwei/p/8625392.html