发表于: 2017-03-25 02:40:34
10 896
一、今天完成的事情
这几天,楼下,楼旁都在装修,每天八点电钻声准时响起,然后持续到傍晚,现在才完成任务,写日报。。。这效率也是醉了,不过感觉更多的还是自身的原因。
1、学习《css代码规范》。
2、学习自适应布局总结。
3、完成任务5——护工个人主页布局。
二、明天计划的事情
完善任务5,开始任务6——护工列表页。
三、遇到的问题
1、护工背景图缩放的时候会留白。
解决方法:background-size:cover实现。
开始使用background-size: contain的,后面查了两者的区别:
①在no-repeat情况下,如果容器宽高比与图片宽高比不同,
cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
PS:其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫
②在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。
2、感觉布局有问题,开始的效果是这样的:
解决方法:上网查询。
get到一个新技能calc()——calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。(具体的我整理后再传上来)
3、怎么在内容不溢出的情况下,增加纵向滚动条?一直没查到结果,请师兄指点一下。
四、收获
1、如何规范css代码。
2、进一步掌握自适应布局。
3、巩固以前学习的知识。
评论