发表于： 2019-10-19 21:49:16
1 1161
今天完成的事情：
今天根据任务五要求完成了更复杂的移动端页面。
尝试用span标签的内联布置左中右结构。用position定位。
最后一行由于自我介绍文字多，自适应过程会有行高的变化，并且要保证元素模块的垂直居中，尝试用flex布局解决。
1.布局如图
感觉标签盒子有点多，任务6换flex弹性布局试试能不能更好。
2.分割线
分割线用div的border设置。
3.同一类型
下半部分的同一类型元素，如从业年限、工作时间等，设置了同一类名，统一设置属性值，减少了一部分代码量。
4.对齐
下半部分页面的对齐除自我介绍外，水平对齐用的都是span标签用padding值对齐。垂直对齐用line-height。
自我介绍部分，因为右半部分文字量大，会在自适应过程出现换行问题，无法用line-height进行对齐。最终使用flex布局完成。
经师兄介绍，还有设置vertical-align:middle的方式。
明天完成的事情：
根据任务6继续练习自适应页面，尝试用flex完成页面布局。
遇到的问题：
1、头像图和背景图的叠加，最后对头像图设置了absolute定位覆盖。
2、下半部分自我介绍部分对齐，因为右半部分文字量大，会在自适应过程出现换行问题，无法用line-height进行对齐。最终使用flex布局完成。
收获：
Flex弹性盒子相关知识。
返回列表
评论