7b2主题美化-移动端底部导航修改美化

Jaysun

温馨提示:这篇文章已超过470天没有更新,请注意相关的内容是否还可用!

移动端现在是网站使用的主流方向,移动端的美化牵扯网站的使用体验,7b2主题移动端美化底部导航栏,可以快速找到相应的内容,这个跟子比主题移动端的底部导航条非常的相似。

效果图:

1.jpg

使用教程:

修改

b2/Assets/fontend/mobile.CSS   中

.mobile-footer-menu.footer-fixed 内容(覆盖原{}中内容)   (宝塔编辑本文中使用搜索即可找到)大概在1153行

.mobile-footer-menu.footer-fixed {position: fixed;padding-bottom: calc(env(safe-area-inset-bottom) + 6px);}一键复制



.mobile-footer-menu 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在2088行


.mobile-footer-menu {box-shadow: 0 -1px 3px 0 rgba(26,26,26,.1);padding: 5px;z-index: 5;flex-flow: nowrap;display: flex;justify-content: space-between;}一键复制



.mobile-footer-menu 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在1163行


.mobile-footer-menu {transform: translate(0);transition: transform .5s,background-color .5s ease-out;box-sizing: border-box;left: 0;right: 0;background: rgba(255, 255, 255, 0.9);border-radius: 12px;margin: 0 auto;width: 90%;bottom: 10px;}一键复制



.mobile-footer-menu .mobile-footer-center button i 内容(覆盖原{}中内容) (宝塔编辑本文中使用搜索即可找到)大概在2110行


隐藏内容
评论可见
前往评论



您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 25 条评论,1659人围观)
网友昵称:墨觉
墨觉 V 普通用户 Google Chrome 123.0.0.0 Windows 10 x64 24楼
04-06 来自福建 回复
看一下
网友昵称:飞翔机器人
飞翔机器人 V 普通用户 Google Chrome 120.0.0.0 Mac OS X 10.15.7 23楼
03-03 来自青海 回复
少一个吧
网友昵称:xiaoguo
xiaoguo V 普通用户 Google Chrome 95.0.4638.69 Windows 10 x64 22楼
01-14 来自广东 回复
文章不错,写的很好!感谢大佬分享!
网友昵称:wanghan
wanghan V 普通用户 Google Chrome 102.0.0.0 Windows 10 x64 21楼
2023-09-24 来自河北 回复
学习一下
网友昵称:tan
tan V 普通用户 Google Chrome 94.0.4606.71 Windows 10 x64 20楼
2023-09-11 来自广东 回复
很好很好
网友昵称:1946400982
1946400982 V 普通用户 Google Chrome 87.0.4280.141 vivo 19楼
2023-08-30 来自浙江 回复
谢谢
网友昵称:a1300013939
a1300013939 V 普通用户 Google Chrome 108.0.5359.125 Windows 10 x64 18楼
2023-06-13 来自山东 回复
看看
网友昵称:AndresG
AndresG V 普通用户 Google Chrome 94.0.4606.71 Windows 10 x64 17楼
2023-05-24 来自河南 回复
看看
网友昵称:superour
superour V 普通用户 Google Chrome 83.0.4103.106 Redmi 16楼
2023-05-12 来自湖北 回复
看看
网友昵称:superour
superour V 普通用户 Google Chrome 83.0.4103.106 Redmi 15楼
2023-05-04 来自湖北 回复
谢谢

目录[+]

取消
微信二维码
微信二维码
支付宝二维码