磁云互联

标题: 手游网站底部盒子下载浮动按钮，支持关闭隐藏 [打印本页]
作者: 磁铁网络    时间: 2021-9-22 01:40
标题: 手游网站底部盒子下载浮动按钮，支持关闭隐藏
第一步：下载素材包，解压上传到网站根目录
(, 下载次数: 8)

第二步：进入后台 - 模板编辑 - 手机模板编辑 - 修改对应模板文件
将一下代码添加到对应文件最底部
css调用代码：
  1. .cbg_div {height:56px;}
  2. .cbg{z-index: 9999}
  3. .cbg div{z-index: 9999}
  4. .cbg .ben_fixed{
  5.     position:fixed;
  6.     bottom:0; left:0;
  7.     width:100%;
  8.     height:56px;
  9.     background:black;
  10.     opacity: 0.65;
  11. }
  12. .cbg .ben_fixed_cent{
  13.     position:fixed;
  14.     bottom:0; left:0;
  15.     width:100%;
  16.     height:56px;
  17.     line-height:18px;
  18.     color:#FFF;
  19.     overflow:hidden;
  20. }
  21. .cbg .ben_fixed_cent table{font-size:14px;}
  22. .cbg .ben_fixed_cent a{color:#FFF; display:inline-block; background:#09c915; border-radius:3px; line-height:26px; padding:0px 8px;}
  23. .cbg .ben_fixed_cent span.x{font-size:10px;}
复制代码


html调用代码：
  1. <script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
  2. <script>
  3.         function close_clent(){
  4.             $('.cbg').hide();
  5.             $('.cbg_div').remove();
  6.         }
  7. </script>
  8. <div class="cbg">
  9.     <div class="ben_fixed"></div>
  10.     <div class="ben_fixed_cent">
  11.         <table width="99%" height="56" border="0" cellspacing="0" cellpadding="0">
  12.             <tbody>
  13.                 <tr>
  14.                     <td width="52" align="center" scope="col" >
  15.                         <span class="l">
  16.                         <img src="https://bbs.6x66.cn/xiazai/img/logo.png" width="42" height="42" alt="仙游阁福利手游盒子！" title="仙游阁福利手游盒子！"></span>
  17.                     </td>
  18.                     <td style="color: #FFF;" align="left" valign="middle"  scope="col">仙游阁福利手游盒子！</td>
  19.                     <td width="80" align="center" scope="col"><a href="下载地址">立即下载</a></td>
  20.                     <td width="20" align="right" valign="top" scope="col"><span style="color: #FFF;" class="x" onclick="close_clent()">X</span></td>
  21.                 </tr>
  22.             </tbody>
  23.         </table>
  24.     </div>
  25. </div>
复制代码


添加后，记得保存
该样式不兼容所以模板，有的页面会出现字体或者图片大小变化
原因是有的模板css样式文件有冲突
如果有不兼容的问题，可以付费联系我们进行添加修复


如果调用出现字体大小不合适，可以尝试顶部调用代码
  1. <meta content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport" />
复制代码


作者: shichg123    时间: 2021-10-28 23:24
谢谢楼主，，，收藏ing
作者: LANLAN88    时间: 2021-12-4 21:08
顶起  很好的帖
作者: liyong470    时间: 2021-12-5 10:53
支持！！！！！！
作者: fanfan_880331    时间: 2021-12-6 00:38
支持，赞
作者: iabajofbwe    时间: 2021-12-6 11:23
学习了！！！！
作者: ejinjing    时间: 2021-12-6 22:09
支持，赞
作者: snk1012    时间: 2021-12-7 11:08
嘻嘻不错支持一个
作者: zhoujingli    时间: 2021-12-8 00:08
学习一下！十分感谢
作者: luovb    时间: 2021-12-8 03:36
期待中......
作者: 5674152    时间: 2021-12-8 07:04
支持！！！！前排！！！！
作者: cGtLUxYT    时间: 2021-12-8 15:09
支持！！！！！！
作者: m1717    时间: 2021-12-8 23:15
谢谢楼主的辛苦分享



欢迎光临 磁云互联 (https://xoooi.com/) Powered by Discuz! X3.4