发表于: 2017-03-15 21:52:35
1 870
今天完成的事情
1、完成了任务9
重构了任务9三个页面的footer部分。之前写的footer部分,由于使用了浮动和用padding挤出来的效果,无法实现响应式。重构之后,使用了flex布局,实现了psd图的效果,也实现了响应式。
2、开始了任务10
进行了基础的布局,给header部分和nav,footer都设置了背景色,并填充了内容,header给两个div,nav使用了ul,li。footer也是用了div
明天计划的事情
1、完成任务10
完善header,footer,nav部分。完成main部分
遇到的问题
任务9footer部分实现响应式困难,重构了footer部分,实现了响应式
收获
进一步的熟悉了flex布局
有六个属性设置在box父容器上,来控制子元素的显示方式;分别是:
flex-direction 设置主轴对齐方式 默认 row x轴从左到右;
flex-wrap 子元素换行的方式 默认nowrap ;
flex-flow flex-direction和flex-wrap的简写 默认row nowrap;
justify-content 子元素的对齐方式 默认flex-start 左对齐
align-items
align-content
1、flex-direction 决定主轴的对齐方向,分别有四个属性:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
评论