移动端底部栏最终效果

基础样式

文本行高 line-height: 2;

背景线性渐变色 background: linear-gradient(to right, #11aeff,#1a96fc);

固定定位 position: fixed; 定位到底部 bottom: 0;

布局样式

弹性布局之 强制换行 flex-wrap: wrap;

高级样式 2D变形(CSS3)

缩放与位移 transform: scale(0.8) translateY(2vw);

① 将通用样式放入index.css中

② 新建 tabber 页面

③写最外层的 盒子 命名 tabber

效果

不是我们想要的。底部栏应该在底部 。给 tabber 一个 固定定位

效果

④ tabber中添加弹性布局之两端对齐

⑤ 写一个div 里面 放上div名字 icon 里面 加个 弹性布局之横向居中对齐 里面放一个图标 icon下面放上一个div 写上文字

效果

给 图标和文字外面的div 也加上 弹性布局之 横向居中对齐

效果

不是想要的效果 应该是 文字在下面 。。。

加一个 弹性布局之强制换行

查看效果

横向居中 没有实现 。给横向居中 加个 弹性布局之 元素等分 flex:1;

效果

这下居中 了修改一下颜色 和图标大小 颜色 在tabber上修改 。图标大小 在icon上修改

效果

文字和图标距离有点远 。

先设置 文字与底部的距离 。设置文字的行高

再设置图标的便宜位置

然后复制粘贴

效果

更换一下图标

效果

知识点回顾

基础样式

文本行高 line-height: 2;

背景线性渐变色 background: linear-gradient(to right, #11aeff,#1a96fc);

固定定位 position: fixed; 定位到底部 bottom: 0;

布局样式

弹性布局之 强制换行 flex-wrap: wrap;

高级样式 2D变形(CSS3)

缩放与位移 transform: scale(0.8) translateY(2vw);