PC端通用布局方案

 

　　思路：

 

　　1.先写出HTML的结构  页眉、主体（内容区）、页脚

 

　　2.然后初始化样式通常用

 

　　3.然后考虑去除一些公共样式 去除的序列号 和 标签的下划线

 

　　4.将页眉、内容区、页脚设置弹性容器，并为主轴垂直排列。将内容区三部分设置为主轴为水平排列的弹性容器

 

　　5.页眉部分 ：将页眉部分的子元素也设置为弹性容器 ，然后再交叉轴上居中排列 。然后让里面的a标签以及内容设置 字体大小、颜色以及文本效果 （文本居中，一般通过实现）还可以设置margin值来调整靠左或者靠右距离。设置flex的放大缩小和宽度控制a标签之间的间距。

 

　　6.最后还可以通过来设置鼠标悬停后的样式

 

　　7.主体部分：设置弹性容器后，可以先设置最小高度撑开内容区。然后设置调整上与页眉和页脚的外边距。然后让内容区子元素水平方向居中排列。然后通过flex值来设置内容区三部分的宽度、放大和收缩。

 

　　8页脚部分：设置弹性容器后，设置主轴垂直排列 ，然后实现文本居中。

 

　　移动端布局

 

　　总结： flex移动端布局，当调整手机型号时，需要重新调整设置。垂直和水平容易搞混淆。还需要多练多写熟悉flex的详细属性。

 

　　HTML5 移动端自适应布局