磁云互联

标题: 手游网站手机版底部导航 [打印本页]

---

作者: 磁铁网络    时间: 2021-9-11 16:38
标题: 手游网站手机版底部导航
第一步：下载素材包，解压上传至网站根目录 (, 下载次数: 1)

上传

点击文件名下载附件

第二步：进入后台 - 模板编辑 - 手机模板编辑 - 修改对应模板文件
将一下代码添加到对应文件最底部
css样式代码：

1. #dui-navbar {
   
2.   width: 100%;
   
3.   display: -webkit-box;
   
4.   display: -webkit-flex;
   
5.   display: flex;
   
6.   position: fixed;
   
7.   bottom: -0.05rem;
   
8.   left: 0;
   
9.   z-index: 10;
   
10.   background-color: #ffffff;
    
11.   box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.2);
    
12. }
    
13. 
    
14. #dui-navbar .navbars {
    
15.      padding: 0.1rem 0rem 0.1rem 0rem;
    
16.   width: 100%;
    
17.   position: relative;
    
18.   overflow: hidden;
    
19. }
    
20. 
    
21. #dui-navbar .navbar-4 {
    
22.   position: relative;
    
23.   float: left;
    
24.   width: 25%;
    
25.   box-sizing: border-box;
    
26. }
    
27. 
    
28. #dui-navbar .navbar-5 {
    
29.   position: relative;
    
30.   float: left;
    
31.   width: 20%;
    
32.   box-sizing: border-box;
    
33. }
    
34. 
    
35. #dui-navbar .navbar-icon {
    
36.   margin: 0 auto;
    
37.   width: 0.6rem;
    
38.   height: 0.6rem;
    
39.   line-height: 0.6rem;
    
40.   text-align: center;
    
41. }
    
42. 
    
43. #dui-navbar .navbar-icon em {
    
44.   display: inline-block;
    
45.   position: absolute;
    
46.   width: 0.2rem;
    
47.   height: 0.2rem;
    
48.   background-color: #ff2400;
    
49.   border-radius: 50%;
    
50. }
    
51. 
    
52. #dui-navbar .navbar-text {
    
53.      line-height: .5rem;
    
54.   font-size: 0.25rem;
    
55.   color: #727577;
    
56.   text-align: center;
    
57. }
    
58. 
    
59. #dui-navbar .navbar-text.on {
    
60.   color: #ffcc00;
    
61. }
    
62. 
    
63. #dui-navbar .dui-payment {
    
64.   padding: 0.32rem 2rem;
    
65.   width: 100%;
    
66. }
    
67. 
    
68. #dui-navbar .dui-payment > a {
    
69.   display: block;
    
70.   font-size: 0.4rem;
    
71.   font-weight: 700;
    
72.   color: #000;
    
73.   text-align: center;
    
74.   height: 1.06666rem;
    
75.   line-height: 1.06666rem;
    
76.   border-radius: 0.53333rem;
    
77.   background-color: #ffd800;
    
78. }
    
79. #dui-navbar .navbar-icon {
    
80.   margin: 0 auto;
    
81.   width: 0.4rem;
    
82.   height: 0.4rem;
    
83.   line-height: 0.6rem;
    
84.   text-align: center;
    
85. }
    
86. 
    
87. #dui-navbar .navbar-icon em {
    
88.   display: inline-block;
    
89.   position: absolute;
    
90.   width: 0.2rem;
    
91.   height: 0.2rem;
    
92.   background-color: #ff2400;
    
93.   border-radius: 50%;
    
94. }
    

复制代码

html核心代码：

1. <div id="dui-navbar"><div class="navbars"><a href="../../" class="navbar-5">
   
2.         <div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_01_on@3x_3c46065.png" style="
   
3.     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">
   
4.         <div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_02_on@3x_9ff09ab.png" style="
   
5.     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">
   
6.         <div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_03_on@3x_89c5e3d.png" style="
   
7.     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">
   
8.         <div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_05_on@3x_57bf42e.png" style="
   
9.     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">
   
10.         <div class="navbar-icon"><img src="{xoooi:sitepath}/img/nav_04_on@3x_abd36ea.png" style="
    
11.     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://xoooi.com/)

Powered by Discuz! X3.4