发表于: 2018-11-24 23:26:25
1 725
2018年11月24日日报
今天完成的事情
1.任务7 home.html
- 使用css绘制圆形:border-radius: 50%;
- 弹性布局,使用了大量的bootstrap属性。
2.任务7 vote.html
使用蓝湖的photoshop插件进行切图。
使用emmet语法进行html的书写。
(div.d-flex.justify-content-around.mt-2>(div.item.d-flex.flex-column>(div.people>div.role.px-4.py-3{水民}+div.order.p-2{$号})+(div.select.d-flex.justify-content-between>i.bg-knife+i.bg-observe+i.bg-stare+i.bg-add))*3)*4
明天计划的事情
完成任务7的第三个页面
提交任务7
遇到的问题
不同行的分隔线需要对齐:
- 通过调整每行开头的span最终宽度来实现。分割线所在区域大小固定。
收获
css3中对于背景图片的处理属性
- background-size 图片大小,cover表示随着页面变化进行覆盖
- background-image 背景图路径
移动端页面的布局实现:
通过将页面划分为不同的细分区域,采用rem作为基准进行定位和大小分割。
emmet语法
进一步熟练了弹性布局和bootstrap的使用。
评论