05 移动端布局基础之flex弹性布局项目实战(携程移动端首页)

技术交流QQ群:1027579432，欢迎你的加入！

1.携程网移动端首页

• 打开网址：m.ctrip.com

  
  
  

  携程网移动端首页.png

2.技术选型

• 方案：采取单独制作移动页面方案
• 技术：布局采取flex布局

3.搭建相关文件夹结构

相关文件夹结构.png

4.设置视口标签以及引入初始化样式

```
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
```

5.常用初始化样式

```
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background-color: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
```

6.常见flex布局思路

常见flex布局思路.png

7.背景线性渐变Gradient Background

• 语法1：

  background: linear-gradient(起始方向,颜色1,颜色2,...);
  background: -webkit-linear-gradient(left, red,blue);
  background: -webkit-linear-gradient(left top,red, blue);

• 背景渐变必须添加浏览器私有前缀；
• 起始方向可以是：方位名词或度数，如果省略默认就是top；

8.资料下载

• 笔记及代码，欢迎star,follow,fork......