前端学习之携程网移动端首页制作

今天做一个静态移动端携程网首页，如下图：

1、准备工作

2、搜索模块制作

3、焦点图模块制作

4、local-nav小导航栏制作

5、nav大导航栏制作

6、subnav-entry制作

7、热门活动模块制作

8、service模块及footer模块制作

9、结语

1.1 技术选型
方案：采取单独制作移动端页面方案
技术：布局采取flex布局
1.2 搭建相关文件（夹）

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

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

这里的normalize.css文件为移动端初始化样式文件，再文章末尾附上。
进入携程移动端首页按F12健看它首页的初始化样式：
引入到我们的index.css中：

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;
}

2.1 布局分析

首先需要一个固定定位的大盒子search-index来装左侧搜索框和右侧用户按钮，这个大盒子需要给定高度，水平居中，需要有最大和最小宽度。
分析这个模块时我们发现，随着窗口宽度的变化，user模块大小固定不变，左侧搜索框适应窗口宽度的变化变宽或变窄。这时候flex布局派上了用场（记得给父盒子添加display:flex;），右侧user我们就该给固定大小，剩下的父盒子区域直接设置搜索框属性：flex:1;即把剩余部分全部给搜索框。
左侧其实并不是一个真正的搜索框，点击会发现去了另一个页面，因此用div做这个“搜索框”，右侧user用a做。
2.2 user用户小模块
user模块分为上面一个小图标，下面一个“我的”，巧妙一点的方法是给a标签加一个before伪元素，放这个图标，把“我的”两字挤下来。
我们从原网站这个图标扒下来，发现是这样的：

这是一张精灵图，原网站user图标是22×22px的，我们用fireworks打开这张精灵图，用切片工具选中这个图标，发现它在精灵图中的大小大概是原网站大小的两倍：

因此我们不能直接引入它的坐标，我们需要先在fireworks中把这张精灵图缩小一半（但不要保存！），然后再用切片工具把user图标切出来，可以看到左下角显示它的大小和坐标：

正是我们需要的大小，记住XY坐标，关掉fireworks（不要保存修改！）后就可以在css文件中引入这个user图标啦，当然，它的坐标是精灵图缩小一半后的坐标，所以不光要
background: url(../images/sprite.png) no-repeat 0 -36px;
还要：background-size: 20px 98px;（修改精灵图大小）。
这里可能会出现轻微误差，用谷歌浏览器进行调试即可。
2.3 搜索框search制作

此前分析到search占search-index的剩余部分，先给他设置：flex:1;测量原网站搜索框大小，高28px，有个上下内边距和左右内边距，还要设置圆角，半径大概15px，背景色为白色；
搜索框内前面的放大镜是通过给search添加before伪元素引入精灵图，给它绝对定位到搜索框前，因为绝对定位不占位置，所以会导致后面的文字跑到放大镜下面，因此记得给search一个左内边距，大致样貌就出现了，再稍微改一下行高、文字颜色、大小即可.
到此，搜索模块制作完成，看看是不是和原网站差不多呢？
3. focus热点图模块

这里原网站是一张大图，放在搜索模块和底部的导航栏下面，我们把图片扒下来存放到upload文件夹，直接插入到.focus盒子中的a标签中，设置宽度为100%即可。
4.1 local-nav模块布局分析及搭建

观察这个模块，它比整个页面宽度要窄一点，给它一个左右的margin值；四个角为圆角，盒子底部有一点阴影；并且盒子盖住了上面焦点图的底部，所以给它一个负的上margin值并设置它为相对定位；里面等分为5个小模块，正好可以用li+flex布局来做。
这样先把local-nav的盒子做好，接下来可以往里面放东西了。
4.2 local-nav内容制作
在ul.local-nav中添加5个li，设置初始化样式：flex:1;
每个小模块都各自放在一个a标签中，在a中又分为上下两个span，分别放图片和文字，图片依然放在了一张精灵图中。我们先把这两个span摆放好，可能会出现这样的结果：
这是因为我们可能忘了给它们的父亲也就是a加上display:flex;而且span是行内元素，即使给了它高度和宽度它也不会显示。加上之后是这个样子：
可是我们希望的结果是两个span一上一下居中对齐，这里我们只需要把默认的主轴改为Y轴，并设置侧轴上元素的排列方式为居中就好了（都是给父元素a设置）：

	flex-direction: column;
    align-items: center;

稍微偏上了一些，给放图片的span一个margin-top值就好。
接下来就是简简单单的给它放上图片、改改字体样式就好啦。
插入这个五个图片有个比较简单且节省代码的方法：

/*先对所有5个放图片的span都放第一张图片，随后从从第二个span开始修改图片位置即从精灵图插入不同的图片*/
.local-nav li [class^="local-nav-icon"] {
    width: 40px;
    height: 40px;
    background-color: aquamarine;
    margin-top: 3px;
    margin-bottom: -4px;
    background: url(../images/local-nav.png) no-repeat 0 0;
    background-size: 40px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -40px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -80px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -120px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -160px;
}

5.1 nav外观布局

位于local-nav下方的nav模块，在nav大盒子中可划分为三行即三个div，高度都为72px；每个div中又有3-4个小div，依然采用flex布局。
因为第一行与另两行不大一样，这里面每个小div也宽度不一，巧妙一点的方法是：指定每行第一个盒子宽度占31%，第二个和第三个盒子宽度占23%，最后一个盒子指定：flex:1;（覆盖第一行最后一个盒子设置的宽度），这样一来每一行每个盒子宽度正好是我们所期望的。
给中间的div一个1px上下外边距；给每行第一二个小div一个1px的白色右边框；给二三行第三个小div1px的白色右边框，这样每个小div周围的白色小空隙就有了。
这部分样式需要小心翼翼慢慢设置，不要心急。我写的有点乱，可以参考下。

nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 4px 4px 3px;
}

.nav-common {
    display: flex;
    height: 72px;
    background-color: chocolate;
}

.nav-common:nth-child(2) {
    margin: 1px 0;
}

.nav-items {
    display: flex;
    flex-direction: column;
}

.nav-items a {
    font-size: 14px;
    color: #fff;
    line-height: 72px;
}

.nav-common:nth-child(1) .nav-items:last-child a {
    color: #A05416;
}

.nav-items:nth-child(1) {
    margin-left: 1px;
    width: 31%;
}

.nav-items:nth-child(1) span {
    margin-left: 15px;
}

.nav-items:nth-child(n+2) {
    width: 23%;
}

.nav-items:last-child {
    flex: 1px;
}

.nav-items:nth-child(-n+2),
.nav-common:nth-child(n+2) .nav-items:nth-child(3) {
    border-right: 1px solid #fff;
}

.nav-items:nth-child(n+2) a {
    text-align: center;
}

把文字样式再设置好（要很细心哦）就可以设置背景颜色和背景图片了。
5.2 插入背景图片及添加背景颜色
把每个小div的背景图片从原网站扒下来插入到我们的小div中，注意缩放比例和图片位置，就做到下图这样：

最后一步就是填充背景色了，我们注意到一个小细节，原网站每一行的颜色是渐变色（由一种颜色渐变到另一种），这里引入添加渐变色的方法：

首先去掉我们原先加上的背景色，根据语法，我们从原网站吸取每行的两个颜色（取色工具可以使用fireworks中的滴管），让他们从左到右进行渐变填充。
当当当当，做好啦

6. subnav-entry制作

这部分和前面的local-nav做法一致，对前面的代码复制粘贴在进行稍微修改即可，这里注意，这个导航栏是两行，因此要对父盒子设置子元素可换行：flex-wrap:wrap;并且每个小li不再是各占一份，而要设置为：flex:20%;也就是每行的li占20%的位置，则正好一行五个。

7.1 布局分析

显然是一个大盒子sales-box中放了上下两个盒子标题部分sales-hd和内容部分sales-bd，sales-box有一个上边框和一个下边框。其中sales-hd中左右两侧的文字图片分别进行定位到左边和右边；sales-bd中就是两个盒子各占一半。
7.2 sales-hd标题部分制作
这部分分为前后两块，前面的”热门活动“，我们先把”热门活动“几个字放在一个h2标签中（前面文章题都过的SEoul优化），然后给h2一个text-indent: -999px; overflow: hidden;把这几个字挤出去并隐藏，然后给h2添加after伪元素引入”热门活动“的图片并绝对定位到合适位置（注意子绝父相）。注意热门活动后面还有个灰色的”广告“小图片，我们可以在h2中放一个i标签，引入这个背景图即可，依然要用绝对定位。
后面的”获取更多福利“我们放到一个a标签中，给a设置好样式，添加渐变的背景色等，后面的小>我们通过给a添加after伪元素来做，它其实是一个只有上边框和右边框的小正方形，给它顺时针旋转45du得到：

/*more是a的类名*/
.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

7.3 sales-bd内容部分制作
在sales-bd盒子里放两个a标签，里面分别放一张广告图和一个span（里面放”广告“二字），对span进行绝对定位，定位到广告图左下角，当然span右上角为圆角，需要先把它转换为块级元素来做。
8. service模块及footer模块制作

依然仿照之前的local-nav来做，不过这里用的不再是精灵图，而是字体图标，这里就不赘述啦~找了半天没找到一模一样的字体图标，就找了类似的，做成这样：

最后面两行就是两个盒子里放几个a标签的事，包含一个精灵图的插入和一个向下的尖号，前面也有讲怎么做。
9. 结语
需要源码的小可爱可以私我或者到我的博客中下载哦。
现阶段这个首页是静态的，还有一些样式尚需改善，比如上方搜索框随页面滚动会固定起来把下面的内容挤出来，而不是遮盖住，这个我还没做出来，需要学完js才能做。
终于做完啦，感觉做网页布局的话真的是要敲好多字来描述，我想这是我最后一篇静态页面布局的文章了，其实来来回回不管在PC端还是移动端，布局思路都差不太多，只要多练练就能熟悉，边写博客边做网页效率不太高，以后就多写一些零碎的知识点吧😀