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.资料下载