发表于: 2018-08-31 23:59:35
1 780
完成的事情:
今天完成了任务五,header和footer部分使用了position:fixed,固定定位是相对于视窗进行定位的,即使页面上下滚动也可以让元素始终保持的窗口内的固定位置。中间的文字部分第一次尝试了用UL,后又改用了p元素套用span元素,
给p元素设置了行高来达到垂直居中,使用了底部边框做出分割线的效果,并设置了字体加粗。
两列文字中间的竖线,是给p元素添加了伪元素,然后使用相对定位。
中间文字最下面的一部分,为了使文字随着屏幕缩放行数改变时,依然保持垂直居中状态,使用了flex的
来完成垂直居中,同时给“自我介绍”添加了flex-grow属性,来达到始终剧中的效果。
明天计划的事情:
产看任务六所需的资料,尝试做出基本框架。
遇到的困难:
开始事打算使用两列ul来完成文字部分的布局,给右侧使用了绝对定位,但是无法完成最后的多行文字始终保持垂直居中。
收获:
对flex和伪元素掌握的更加熟练,flex应该如何进行不同模式的布局,比如使用
来完成两个元素始终平分一行!
评论