初学h5c3----实现携程小页面

效果图==> 

顶部图片

利用header标签实现顶部图片，通过设置width:100%来实现图片能随页面进行缩放。

注意利用好flex进行宽度比例的实现

中间四个框

划分好区域，将模块分多个div

两个大图标

通过flex使其水平，再设置flex:1实现

关键知识点

1.对于display中的flex。

将最大的父级设置flex，其下的子级通过对flex设置1则代表全部占满。

两者1 2 ，则代表一比二的比例。

2.对于flex-wrap的三种形式（应用在父级元素中）

（1）nowrap（默认）不换行

（2）wrap   换行，第一行在上边

（3）wrap-reverse 换行，第一行在下边

对于本题用到了四个小div需要进行换行来调整

3.对于box-sizing的两种属性

（1）content-box（默认值）元素总尺寸 = 内容尺寸 + 内边距  +  边框

（2）border-box 自己设置的尺寸即为元素可视区域的总尺寸。（也就是说会将内容尺寸压缩，最后得到的包括内边距和边框的所有尺寸是对元素的设置尺寸）

如下图，都是width为200 height为100的图像，区别在于：

content-box 是260 × 160，尺寸为内边距左右40 + 边框左右20 + 内容200 = 260（同理height）

border-box是200 × 100，也就是我们规定的元素本身宽高，通过压缩内容宽高实现

对于本题的四个div就无需再单调整，直接利用border-box来通过对内容的压缩实现效果

注意

1.每一个style写之前都应将margin和padding清零，以及list-style:none去除属性。

2.去除a标签下划线text-decoration:none。

3.将header，footer作为习惯性的标签直接使用，而不是用class分类