发表于: 2018-11-12 20:52:07

1 673


今天完成的事情:

页面二基本完成,还需要继续调试一些细节的地方

重新制做了header的响应式布局,以前并没有考虑到头部的响应式布局

今天在查看官网的时候,发现页面变小的时候会出现点击出现下拉框的按钮

然后花了一下午还是做出来了

学习了flex布局兼容性的写法:

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  

display: -moz-box; /* Firefox 17- */  

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  

display: -moz-flex; /* Firefox 18+ */  

display: -ms-flexbox; /* IE 10 */  

display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

/*伸缩流方向*/

.flex-direction_column{

    -webkit-box-orient: vertical;

    -ms-flex-direction: column;

    -webkit-flex-direction: column;

    flex-direction: column;

}

/*主轴对齐*/

.justify-content_flex-center{

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

}

.justify-content_flex-end{

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

}

.justify-content_flex-justify{

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

    justify-content: space-between;

}

/*侧轴对齐*/

.align-items_flex-start{

    -webkit-box-align: start;

    -ms-flex-align: start;

    -webkit-align-items: flex-start;

    align-items: flex-start;

}

.align-items_flex-end{

    -webkit-box-align: end;

    -ms-flex-align: end;

    -webkit-align-items: flex-end;

    align-items: flex-end;

}

.align-items_center{

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}

.align-items_baseline{

    -webkit-box-align: baseline;

    -ms-flex-align: baseline;

    -webkit-align-items: baseline;

    align-items: baseline;

}

/*伸缩性*/

.flex_auto{

    -webkit-box-flex: 1;

    -ms-flex: auto;

    -webkit-flex: auto;

    flex: auto;

}

.flex_1{

    width: 0;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    -webkit-flex: 1;

    flex: 1;    

}

先写下来,以后再加深记忆

明天计划的事情:

完成页面二,为页面二做响应式,用sass重写css

遇到的问题

暂无

收获:

学会了点击下拉按钮的制作,学习了flex布局的兼容性写法


返回列表 返回列表
评论

    分享到