Flex对于网页的布局相对于许多布局方法明显有着简便之处。所以在这篇博客文章中希望大家能够从携程网这个案例中有所收获！
========================================================================
当我们想要做一个产品的页面就要从整体到局部来进行搭建，所以先让我们来看一下携程移动页面端的大致样子吧！
由于页面较长分成两张图来展示（页面1如下）：
我们将页面1分成了5大部分：search-index、focus、local-nav、nav、subnav-entry。
由于页面较长分成两张图来展示（页面2如下）：
我们将页面2整个页面放在sales-box一整个大盒子里，然后里面分成两部分，sales-hd和sales-bd。
======================================================================
制作移动页面前我们需要将整个页面的大小控制好，以及一些网页中的默认效果清除，方便实现我们所想要的具体效果。
代码如下：
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;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
/* 由于我们在h5c3中大量使用div盒模型
所以我们直接就准备写好box-sizing */
}
效果如下：
- 首先这个顶部导航栏是右边固定定位，左边撑满使用flex
tips:
固定定位是以浏览器为主，所以我们要给这个元素限定宽度
max-width：540px； & min-width：320px；
记得给父盒子加上display:flex；然后width：100%；
让固定定位的盒子居中显示的页面的中间方法（margin无法实现）：
way1：
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);/为了适应不同浏览器/
transform: translateX(-50%);
way2：
position: fixed;
top: 0;
右边的用户这一块用a链接，a链接为行元素没有大小，但我们一旦父盒子使用了flex那里面的子盒子就类似也都有了flex的效果，那a链接就可以直接给大小了。
效果如下：
这种布局我们就用a链接和伪类来写：
.user {
width: 44px;
height: 44px;
/* a链接给了大小值 */
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: ‘’;
display: block;
width: 24px;
height: 24px;
background: url(…/images/sprite.png) no-repeat -58px -193px;
background-size: 103px auto;
margin: 5px auto -2px;
}
效果如下：
由于放大镜这个图片是行内块元素我们为了让它固定在搜索栏里所以我们就用定位来解决
代码如下：
.search {
position: relative;
height: 26px;
line-height: 24px;
border: 1px solid #ccc;
flex: 1;
margin: 6px 10px;
border-radius: 5px;
font-size: 12px;
color: #666;
padding-left: 25px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search::before {
content: ‘’;
/* display: block; */
position: absolute;
top: 5px;
left: 5px;
width: 15px;
height: 15px;
background: url(…/images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
/* margin: 5px; */
}
在这一部分还有一个小细节，就是我们在制作中会发现放大镜的图片和那一行提示问题没有对齐
问题如下：
那我们的解决思想就是height和line-height之间的问题
代码如下：
.search {
position: relative;
height: 26px;
line-height: 24px;
border: 1px solid #ccc;
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
//bbs.csdn.net/topics/618166371)**
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
