第一步:下载素材包,解压上传至网站根目录
第二步:进入后台 - 模板编辑 - 手机模板编辑 - 修改对应模板文件
将一下代码添加到对应文件最底部
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样式文件有冲突
如果有不兼容的问题,可以付费联系我们进行添加修复 |