发表于: 2019-02-24 23:15:47
1 723
今天完成的事:
1.完善了任务三的布置,但是离官网给的标准还差一些细节
明天的计划:
1.继续完善任务三
2.学习自适应,屏幕分辨率,图片之间的关系,让图片清晰度更高,更加适合屏幕大小
遇到的问题:
1.对于logo和文字的上下两行实现,我一开始想了很久,但是只解决了两个logo并排的方法,用一个inline-block,但是这样的后果就是,两个logo并排了,但是下面的文字怎么办。然后就开始思路各种跑偏,我还根据几个网上看到的demo,进行了ul li的排布,还用了伪元素::befofe的排布。最后绕一大圈,才恍然大悟,用一个<p> 加上Div内部inline-block就可以解决了,上图
HTML:
CSS:
今天的效果图——明天继续完善:
收获:
1.进一步了解了rem——刚开始写移动端的时候,都要面对自适应的问题,解决方案很多,比如:百分比布局,弹性布局(flex),但是还有一个比较顺手简单的方案就是——rem布局
rem的自适应原理:rem是根据html的font-size大小来变化的,正式基于这个,我们才可以实现在在每一个设备下根据设备的宽度设置相对应的html字号,从而实现自适应布局。
rem值,目前有两种方法可以调整html的字号 1.通过媒体查询来调整 2.根据js来调整html字号。
2.对于盒模型的布局,稍微复杂一些就思维混乱,今天又稍稍搞明白点了,弯路绕也绕了!还是基础不扎实,只能自己多下些功夫了!
评论