[TOC] # 携程网需求 |  |  | | --- | --- | # 准备步骤 ## 1.技术选型 方案:我们采取单独制作移动页面方案 技术:布局采取flex布局 ## 2.搭建相关文件夹结构  ## 3.设置视口标签以及引入初始化样式 ~~~ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1 .0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/ index. css"> ~~~ 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-highl ight-color: transparent; } ~~~ # 开始 |  | 固定定位必须给宽度2、样式3、搜索4、放大镜 | | --- | --- | | 2、 |  | | 3、 | 1、清除默认2、给高不给宽 | |  |  | | 4、nav导航栏 | 上下平分 | | 5、 |  | | 6、6.1 6.2 | **让浏览器知道这是一个标题 但是不显示标题名字6.2** | |  |  | /*背景渐变必须添加浏览器私有前缀*/ background: -webkit- linear- gradient(left, red, blue);  # 背景线进渐变  # flex布局 重点