移动端导航栏

用户7695850185112
1,168 阅读4分钟

导航栏最终效果

image.png

① 要使用的基础样式有以下五个

设置宽度 width:100vw;

设置高度 height:10vw;

设置字体大小 font-size: 3vw;

设置字体颜色 color: #fff;

设置背景颜色 background:#1777ff;

② 要使用的布局样式有以下九个

盒子内部挤压 padding: 0 1vw;

防止内部挤压宽度溢出 box-sizing: border-box;

开启弹性布局 display: flex;

弹性布局之横向两端对齐 justify-content: space-between;

弹性布局之横向左对齐 justify-content: flex-start;

弹性布局之横向右对齐 justify-content: flex-end;

弹性布局之横向居中对齐 justify-content: center;

弹性布局之枞向居中对齐 align-items: center;

弹性布局之宽度等分 flex: 1;

③ 要使用的图标样式有以下俩个

菜单图标 format-justify

搜索图标 search

④ 要使用的 HTML 标签 有 以下俩个

div 标签 和 i 标签

⑤ 要使用 class 名 有 以下

导航栏 navbar

两端对齐 space_between

左对齐 flex_start

右对齐 flex_end

水平居中 flex_center

图标 icon

⑥ 开始布局前 先观察要实现的导航栏 的结构

布局 规则 有 从外层向内写 。从左侧向右侧写

image.png

最外层 是一个 背景色#1777ff 高度 10vw 宽度 100vw 的盒子 我们用 navbar 命名

image.png

效果

image.png

⑦ 再观察内部 是如何布局的

image.png

很明显是左中右 等分的 这个时候需要用到弹性布局的 横向 两端对齐

用 space_between 命名一个class

image.png

效果

image.png

这个时候 div 垂直排列 给 space_between 加个 开启弹性布局

image.png

效果

image.png

里面的div 横向排列了。但是都在左边 给 space_between 加个两端对齐

image.png

效果

image.png

接下来 先调一下细节 让文字变成白色 字体大小给3vw 不用给每个div加 只需要给最外层的div

image.png

效果

image.png

现在文字 都顶在最上面 让他居中。可以使用 弹性布局之 垂直居中

image.png

效果

image.png

失败了。。找一下原因 给 space_between 加个其他背景色background: green;

image.png

效果

image.png

原因找到了 space_between 两端对齐的这个class 没有高度 加个高度

image.png

效果

image.png

垂直居中了。

两边好像太顶 了。给最外层 一个 内部挤压 padding: 0 1vw;

image.png

效果

image.png

又出问题了。。右边 被顶出去了。 原因是 padding内部挤压会增加外层的宽度 造成宽度超出 解决办法 使用 防止内部挤压宽度超出

image.png

效果

image.png

ok 去掉 两端对齐的背景色了。

image.png

效果

image.png

⑧ 内部两端对齐 完成后 开始 左边 部分 先 观察原图

image.png

一个 图标 一个 文字

先写div

image.png

效果

image.png

挤到一起了。

解决办法 让 左边的div 开启弹性布局 让里面的内容 左对齐 所以起名 flex_start

image.png

看下效果

image.png

是分开了。但是图标的位置不对。。。

给图标 套个div起名字叫icon 图标的意思 。然后设置宽高 和背景色 看看问题

image.png

效果

image.png.

图标位置跑偏的。。这个时候可以 在icon 里面 加一个 弹性布局之水平居中对齐 命名为 flex_center

image.png

效果

image.png

水平居中了但是 没有垂直居中 在加个 弹性布局垂直居中

image.png

效果图

image.png

还是不对。。 给flex_center 加个背景色看看什么原因

image.png

红色没出来。。。 原因知道了。flex_center没有高度

image.png

效果

image.png

图标是居中了。 左边的字 又不居中了。。。 直接给 弹性布局 左对齐也加个垂直居中 和 高度 看看

image.png

效果

image.png

居中了 。。

但是 又出问题了

中间的字 不横向居中了。。

image.png

这个问题是 弹性布局 里面有左中右 其中一个宽度 超过其他两个。其他两个就会被加压 。 解决办法是让左边 和右边 宽度一致 中间的文字 就会在中间 。弹性布局中推荐使用 元素等分 flex:1;

先给右边起个名字

image.png

然后给左右 flex:1

image.png

效果

image.png

又出问题了 右边的文字跑到左边了。 这个时候使用 弹性布局之 右对齐 命名

右侧改下名

image.png

image.png

效果

image.png

这下中间的文字居中了。去掉左边的背景色

效果

image.png

⑨ 接下来是右侧 。 复制左边的 图标 。放到 flex_end 中试试

image.png

效果

换一下图标名 换成搜索的 gg-search

image.png

效果

image.png

整理下样式 格式 导航栏 就完成了。

重点知识 弹性布局

② 要使用的布局样式有以下九个

盒子内部挤压 padding: 0 1vw;

防止内部挤压宽度溢出 box-sizing: border-box;

开启弹性布局 display: flex;

弹性布局之横向两端对齐 justify-content: space-between;

弹性布局之横向左对齐 justify-content: flex-start;

弹性布局之横向右对齐 justify-content: flex-end;

弹性布局之横向居中对齐 justify-content: center;

弹性布局之枞向居中对齐 align-items: center;

弹性布局之宽度等分 flex: 1;

avatar
文章
阅读
粉丝