携程网移动端首页

访问地址

官方图预览

1. 技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取flex布局

2. 搭建页面文件夹结构

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

    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
复制代码

4. 常用初始化样式

• 设置最大宽度
• 设置最小宽度

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: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
复制代码

6. 首页布局分析

由上自下：

• 搜索模块（固定在顶部）
• 主导航模块
• 内容模块
• banner模块
• 底部导航栏模块 （固定在底部）

注意： 宽度都是自适应，高度是定死的

7. 常见flex布局思路

如何做一个盒子里的上下结构

1. 给父盒子设置（display：flex）
2. 每个盒子均分（flex：1）
3. 把主轴设为Y轴 （flex-direction: column;）
4. 把侧轴设为居中对齐（align-items：center）

8. 最后效果图

9. 全部代码

点击查看下载