磁云互联
标题:
手游网站手机版底部导航
[打印本页]
作者:
磁铁网络
时间:
2021-9-11 16:38
标题:
手游网站手机版底部导航
第一步:下载素材包,解压上传至网站根目录
(, 下载次数: 1)
上传
点击文件名下载附件
第二步:进入后台 - 模板编辑 - 手机模板编辑 - 修改对应模板文件
将一下代码添加到对应文件最底部
css样式代码:
#dui-navbar {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
bottom: -0.05rem;
left: 0;
z-index: 10;
background-color: #ffffff;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2);
}
#dui-navbar .navbars {
padding: 0.1rem 0rem 0.1rem 0rem;
width: 100%;
position: relative;
overflow: hidden;
}
#dui-navbar .navbar-4 {
position: relative;
float: left;
width: 25%;
box-sizing: border-box;
}
#dui-navbar .navbar-5 {
position: relative;
float: left;
width: 20%;
box-sizing: border-box;
}
#dui-navbar .navbar-icon {
margin: 0 auto;
width: 0.6rem;
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
}
#dui-navbar .navbar-icon em {
display: inline-block;
position: absolute;
width: 0.2rem;
height: 0.2rem;
background-color: #ff2400;
border-radius: 50%;
}
#dui-navbar .navbar-text {
line-height: .5rem;
font-size: 0.25rem;
color: #727577;
text-align: center;
}
#dui-navbar .navbar-text.on {
color: #ffcc00;
}
#dui-navbar .dui-payment {
padding: 0.32rem 2rem;
width: 100%;
}
#dui-navbar .dui-payment > a {
display: block;
font-size: 0.4rem;
font-weight: 700;
color: #000;
text-align: center;
height: 1.06666rem;
line-height: 1.06666rem;
border-radius: 0.53333rem;
background-color: #ffd800;
}
#dui-navbar .navbar-icon {
margin: 0 auto;
width: 0.4rem;
height: 0.4rem;
line-height: 0.6rem;
text-align: center;
}
#dui-navbar .navbar-icon em {
display: inline-block;
position: absolute;
width: 0.2rem;
height: 0.2rem;
background-color: #ff2400;
border-radius: 50%;
}
复制代码
html核心代码:
<div id="dui-navbar"><div class="navbars"><a href="../../" class="navbar-5">
<div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_01_on@3x_3c46065.png" style="
width: 100%;max-height: 100%;vertical-align: top;pointer-events: none;"></div><p class="navbar-text">推荐</p></a><a href="../../list/?8_1.html" class="navbar-5">
<div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_02_on@3x_9ff09ab.png" style="
width: 100%;max-height: 100%;vertical-align: top;pointer-events: none;"><em></em></div><p class="navbar-text">手游</p></a><a href="../../list/?48_1.html" class="navbar-5">
<div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_03_on@3x_89c5e3d.png" style="
width: 100%;max-height: 100%;vertical-align: top;pointer-events: none;"></div><p class="navbar-text">H5</p></a><a href="../../list/?1_1.html" class="navbar-5">
<div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_05_on@3x_57bf42e.png" style="
width: 100%;max-height: 100%;vertical-align: top;pointer-events: none;"></div><p class="navbar-text">资讯</p></a><a href="http://wpa.qq.com/msgrd?v=3&uin={label:客服号码}&site=qq&menu=yes" class="navbar-5">
<div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_04_on@3x_abd36ea.png" style="
width: 100%;max-height: 100%;vertical-align: top;pointer-events: none;"></div><p class="navbar-text">客服</p></a></div></div>
复制代码
添加后,记得保存
该导航不兼容所以模板,有的页面会出现字体或者图片大小变化,原因是有的模板css样式文件有冲突
如果有不兼容的问题,可以付费联系我们进行添加修复
作者:
EFLwCYCj
时间:
2021-10-23 18:53
不错不错 支持下
作者:
wan5325
时间:
2021-12-4 21:08
很不错的哦,支持,加油
作者:
lhserver
时间:
2021-12-5 10:53
嘻嘻不错支持一个
作者:
GRcSXZPy
时间:
2021-12-6 00:38
好像还不错!
作者:
eUzWWhFM
时间:
2021-12-6 11:23
顶一个了
作者:
twxd
时间:
2021-12-6 22:09
必须支持。。。。。。。
作者:
bTHzJAvw
时间:
2021-12-7 11:08
顶一个了
作者:
露西iwfrvhfm
时间:
2021-12-8 00:08
路过还不错
作者:
HPCDbcwu
时间:
2021-12-8 03:36
学习了,这就去试试
作者:
inmyhome
时间:
2021-12-8 07:04
抢楼了,前排第一次啊
作者:
m1717
时间:
2021-12-8 15:09
不错不错 支持下
作者:
跳舞の芒果
时间:
2021-12-8 23:15
碉堡了!
欢迎光临 磁云互联 (https://www.xoooi.com/)
Powered by Discuz! X3.4