您的位置:首页 > 其它

小知识点整理

2015-08-12 11:27 260 查看
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(把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: