8月28日-8月29日（flex布局-移动端携程案例）-CSDN博客

本文链接：https://blog.csdn.net/qq_44659171/article/details/126586389

本文详细介绍了使用Flex布局实现移动端携程页面的各个模块，包括顶部搜索栏、焦点图、局部导航栏、主导航栏、侧导航栏、销售模块、底部模块和版权模块的设计与实现，涉及布局、样式及注意事项。

摘要由CSDN通过智能技术生成

一、顶部搜索栏模块 (search-index)

二、轮播图模块 (focus)

三、局部导航栏模块 (local-nav)

四、主导航栏模块 (nav)

五、侧导航栏模块 (subnav-entry)

六、销售模块 (sales)

八、版权模块 (copyrights)

九、整体效果

前言：准备工作

1. 技术选项

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

技术：布局采取flex布局

2.搭建相关文件夹结构

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

4. 常用初始化样式

5. 常用模块命名

一、顶部搜索栏模块 (search-index)

1.1 布局

大盒子里分为左右两个小盒子：

左边用div来做，里面的文字直接放在div标签里，小图标则用伪元素来做；

右边用a来做，里面的文字直接放在a标签里，小图标则用伪元素来做；

html代码：

 <div class="search-index">
        <div class="search">搜索：目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>

1.2 样式

1) 大盒子div(search-index)

盒子类型：设置为弹性盒子，为了其子级可以用弹性布局

位置：设置在浏览器水平居中，先走浏览器的一半，再走自身的一半；

设置为固定定位，实现鼠标往下滑动，这个模块永远停留在最顶端的效果；

大小：设置宽度和父级一样宽100%，高度设置一个44px；

设置最大宽度540px，最小宽度320px，以至窗口缩放时，里面的内容不会乱

2) 左盒子div(search)

布局：独占大盒子分配给a剩下空间的一份，用子项的属性flex: 数字，来设定；

大小：弹性布局的盒子不用给宽度，只给一个高度26px就行；

外观：设置一个5px的圆角；

设置一个1px #ccc的外边框，并设置一个盒子阴影；

设置在大盒子里的空隙：上下外边距为7px，左右外边距为10px；

文字：设置文字大小为12px，文字颜色为666，并让文字垂直居中；

设置文字离search左边框有一个25px的距离，用padding值

伪元素（放大镜的做法）：

位置：用绝对定位，定到search盒子的里面，top值13px，left值15px

大小：宽度和高度都设置为15px；

放大镜图标：用精灵图（二倍图）来做，先把精灵图缩小一半，再去框选所需要的图标（大小和用来装图标背景的盒子大小一样，15*15），再测量缩小一半后的所选图标的位置，最后进行背景图缩放（只用缩小宽度的一半，高度为auto，按比例缩小）

3) 右盒子a(user)

大小：宽度和高度都设置为44px；

文字：设置文字位置为水平居中，文字大小为12，颜色为蓝色#2eaae0；

伪元素（图标“我的”的做法）：

盒子类型：设置伪元素为块级元素，这样图标和文字就可以分成两行排列（块级元素独占一行）

大小：宽度和高度都设置为25px；

图标“我的”：同样用精灵图二倍图来做，同上；

再调整一下图标盒子在a里的位置，水平居中，上下各给一个距离（用margin来做，水平居中用auto，上给个4px，下给个-2px的距离）

4) css代码

/* 1顶部搜索栏模块 start */
.search-index {
    display: flex;
    /* 用固定定位，实现鼠标滑动，但还停留的效果 */
    position: fixed;
    top: 0;
    /* 以下两步实现水平居中: */
    /* 1 先走浏览器的一半 */
    right: 50%;
    /* 2 再走自身的一半 */
    transform: translateX(50%);
    /* 固定定位一定要有宽度！！！！！！！！ */
    width: 100%;
    height: 44px;
    max-width: 540px;
    min-width: 320px;
    /* background-color: pink; */

}
.search-index .search {
    flex: 1;
    height: 26px;
    margin: 7px 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0,.3);
    /* 设置里面的文字 */
    color: #666;
    font-size: 12px;
    /* 文字垂直居中 */
    line-height: 24px;
    /* 让文字距离左边框有个距离，用padding值撑开 */
    padding-left: 25px;
}
.search-index .search::before {
    content: '';
    /* display: block;不用块级元素，会把文字挤到下一行中去 */
    /* 用绝对定位 */
    position: absolute;
    top: 13px;
    left: 15px;
    width: 15px;
    height: 15px;
    /* 二倍图 */
    /* 装背景图的盒子大小和精灵图里需要的小图标大小一样 */
    background: url('../images/sprite.png') no-repeat -58px -279px;
    background-size: 104px auto;
}
.search-index .user {
    width: 44px;
    height: 44px;
    /* background-color: purple; */
    /* 调整里面文字位置为水平居中 */
    text-align: center;
    /* 设置文字的大小和颜色 */
    font-size: 12px;
    color: #2eaae0;
}
.search-index .user::before {
    content: '';
    display: block;
    /* 这里用了块级元素，文字就可以直接到下一排 */
    width: 25px;
    height: 25px;
    background: url('../images/sprite.png') no-repeat -58px -193px;
    background-size: 104px auto;
    /* 调整人像的位置,水平居中，上下各给一个距离 */
    margin: 4px auto -2px;
}
/* 1顶部搜索栏模块 end */

1.3 注意事项

1) 因为顺序的原因是先放div-search 再放a,a不用给固定定位，a给了宽度和高度后，剩下的空间交给div-search来分配，div-search它独自占剩下的整个一份（其父亲search-index要设置弹性布局）；

2) 使用固定定位的盒子一定要设置宽度；

3) 注意区分弹性布局（display: flex）和固定定位（position: fixed）的写法；

4) 伪元素一定要写content: ' ' ;

5) 在有上下布局时，如果有一个盒子是行内元素，可将其转换为块级元素，则可实现垂直摆放两个盒子；（例如：伪元素图标和文字）

6) 图标的做法通常是：给定一个有宽度和高度的盒子，利用背景属性，放精灵图（二倍图原理），框选图标的大小和盒子的大小一样（背景大小和要设置背景的盒子大小一致），测量的是缩小的精灵图图标的位置，最后进行背景的缩放（只用缩小宽度的一半）

二、焦点图模块 (focus)

2.1 布局

在盒子里放一张图片即可。（暂时）

html代码：

 <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

2.2 样式

给 div 大盒子设置一个上外边距44px ( 恰好是上一个模块的高度 )，原因：上一个模块设置了固定定位，不占位置，这个标准流会跑到上一