首页 > 其他 > 详细

小知识点整理

时间:2015-08-12 14:55:22      阅读:120      评论:0      收藏:0      [点我收藏+]

1、img一般要设置display:block,解决空白问题;

2、移动端H5,图片自适应问题,宽与高,用大值除以小值,获得的值设置父元素DIV的padding-top;

 <div class="topic"><img src="images/topic.jpg" alt="资源开放说明与进驻登记"></div>

.topic{position:relative;padding-top:177.5%;background-color:#891f35;}
    .topic img{position:absolute;left:0;top:0;width:100%;height:100%;}

上面是为了图片还没加载出来时,先占位,而且设置一个跟图片差不多的背景颜色。记得图片的alt属性还是写上较好;

3、移动端H5,width与heigh,font-size的设定,参考设计图的数字/2;切图时切偶数值;

<div class="title">一站式满足家长求助、求知、社交需求</div>

.platform .title{margin:0 auto 1em auto;width:247px;height:31px;background:url(images/title-bg.png) 0 0 no-repeat;background-size:contain;
        font-size:13px;text-align:center;line-height:31px;
    }

设置DIV的宽高为背景图片的一半,使用background-size:contain(把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。)


小知识点整理

原文:http://ppxxll.blog.51cto.com/10549080/1683926

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!