携程在线网页制作（flex布局）（静态页面）

1.技术选型
方案：单独制作移动端页面
技术：flex布局2.搭建相关文件夹结构
css images（背景图、精灵图等） upload（产品图）   index.html
3.引入
引入视口标签和相关样式

知识点：

flex布局（适用于移动端，对于大多数pc端的浏览器兼容性较差）
给父元素添加了display：flex；之后里面的子元素就没有了块级元素和行内元素之分都可以设置大小和在一行显示（float clear vertical-align都失效了）
flex布局父元素的属性：flex-direction（row column）设置主轴方向    flex-wrap：wrap（是否换行） justify-content：flex-start/flex-end/center/space-around/space-between(设置主轴上的元素排列方式)align-items(侧轴单行排列方式)align-content（侧轴多行排列方式）
在子元素flex：n;瓜分剩余空间

背景颜色的线性渐变色： background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2，...，最终颜色);

效果图：