技术交流QQ群:1027579432,欢迎你的加入!
1.携程网移动端首页
- 打开网址:m.ctrip.com
2.技术选型
- 方案:采起单独制做移动页面方案
- 技术:布局采起flex布局
3.搭建相关文件夹结构
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布局思路
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.资料下载