flex这么好用你居然还不知道？！

制作移动页面前我们需要将整个页面的大小控制好，以及一些网页中的默认效果清除，方便实现我们所想要的具体效果。

代码如下：

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 */

}

1.search-index顶部导航栏

---

效果如下：

• 首先这个顶部导航栏是右边固定定位，左边撑满使用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;

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

}

2.local-nav局部导航栏

---

效果如下：

在这部分我们发现大盒子local-nav里的小盒子大小相同，所以我们选择使用ul和li来表示；里面的li是由整个a链接来包含一张图片和一行字。

HTML框架如下：

CSS代码如下：

.local-nav {

display: flex;

height: 64px;

background-color: #fff;

margin: 3px 4px;

border-radius: 8px;

}

.local-nav li {

flex: 1;

/* 盒子里面的li平均分布 */

}

.local-nav a {

display: flex;

flex-direction: column;

/* 侧轴居中对齐 因为是单行 */

align-items: center;

font-size: 12px;

}

效果如下：

对于这种效果的，我们使用flex来解决：

.local-nav li {

flex: 1;

/* 盒子里面的li平均分布 */

}

.local-nav a {

display: flex;

flex-direction: column;

/* 侧轴居中对齐 因为是单行 */

align-items: center;

font-size: 12px;

}

3.nav主导航栏

---

效果如下：

这部分的制作思路，先分成三行用3个div来表示出来，每一行中再分成3列。

代码如下：

/* 先分成3行 */

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。*

[外链图片转存中…(img-s8agxtxF-1714858036560)]

[外链图片转存中…(img-RCYIWldU-1714858036560)]

[外链图片转存中…(img-OtmbbWYs-1714858036561)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！