发表于: 2019-07-01 00:59:00
1 780
时隔好久才回来继续做任务,有点手生啦。翻开之前写的代码,发现有很多地方的页面元素以及样式都可以简化。于是花了些时间完善了一下。
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
1. 简化页面设计,修复了若干bug
1) fixed-footer会遮住页面最下端内容,屏幕滚动到最下方时可以发现
2) 自我介绍栏应该垂直居中显示,而不是贴顶端
3) 手机浏览可以发现页面右边有白边
2. 重新整理并上传了代码库,使用gh-pages展示多任务(更新了前面日报里面的页面地址)
3. 预习了任务6可能用到的雪碧图概念
明天计划的事情:(一定要写非常细致的内容)
1. 任务6开始,包括切图,打基本元素框架
2. 系统学习下flex布局 (之前都是用什么看什么)
遇到的问题:(遇到什么困难,怎么解决的)
先上一下最新版本的成果图:
[Solved] Bug1: fixed-footer会遮住页面最下端内容。 下图的滚动条已经拉到底了,但页面仍然有一部分未显示
这个bug其实很好修,只是之前没发现还有这个问题。直接给正文部分的div加上了padding-bottom,
修复前:
[Solved] Bug2: 自我介绍栏应该垂直居中显示,而不是贴顶端
这个bug非常头痛。试了很多种方法,还参考了一位同学的代码后,终于用flex实现出来了。实际上核心部分就是
{
display:flex;
display:-webkit-flex;
flex-direction: row;
align-items:center;
}
很简单对吧。我之前用的是position: absolute在做左边表头的div,调了好久愣是没做出来。。这也是我需要系统性学习一下flex布局的原因。之前做布局基本上都是用到什么看什么,对其使用场景没有一个完整的概念。
修复前:
[Solved] Bug3: 手机浏览可以发现页面右边有白边
这也是个很傻的问题。。我在专业技能这行的元素加了margin,导致页面被强行向右撑开。改成了padding就好啦。
修复前:
收获:(通过今天的学习,学到了什么知识)
复习了一下前边学过的知识。在自己做出来了以后还参考了一下其他学员的实现方式。突然感觉布局这部分真的是多解,float, position, flex, inline-block, table等等,他们功能都很强大,而且各自擅长某些特定的场景。有些朋友在做开发的时候都是在使用现成的框架。个人感觉,倒不是框架不好,只是如果因为有课框架就不重视底层实现,是没有办法做到“优秀”的。
希望后面的学习顺利。
评论