发表于： 2018-11-06 23:33:23
1 821
2018年11月6日日报
今天完成的事情
1.完成了任务5的剩余部分。
主页面分为头像介绍和具体技能。
头像介绍区域采用一个大的背景图，头像图、姓名简介用绝对定位（相对于背景图区域）。
在姓名简介内部，位置图标使用负的margin-left来突出所在区域。
具体技能方面，除了最上面一行以外，采用无序列表来排列元素。这样便于选择器同时指定多个元素的样式。无序列表使用list-style:none来取消默认样式。
无序列表中的各个元素，主要使用span来做进一步的细化。对于长文本的高度自适应，采用height:auto来实现
明天计划的事情
开始进行任务6
遇到的问题
不同行的分隔线需要对齐：
通过调整每行开头的span最终宽度来实现。分割线所在区域大小固定。
收获
css3中对于背景图片的处理属性
- background-size 图片大小，cover表示随着页面变化进行覆盖
- background-image 背景图路径
移动端页面的布局实现：
通过将页面划分为不同的细分区域，采用rem作为基准进行定位和大小分割。
返回列表
评论