非常好看的QQ代刷网返回顶部美化代码
我发现很多的QQ代刷网页面都会很长,有时候想返回顶部需要用鼠标拉很久浪费时间,所以今天我就给大家分享一个非常好看的QQ代刷网返回顶部美化代码,主要包括:收藏主页、一键分享和返回顶部的美化按钮,效果图如下:
代码分为两个部分,一个是html代码,另一个是css样式,主要功能就是可以让你快速回到代刷网的顶部,然后可以让客户收藏你的QQ代刷网址,还可以让用户主动帮你推广你的网站,一举三得,喜欢就拿去用吧!代码如下:
<div class=”side-buttons” id=”side-buttons”>
<div class=”side-buttons-box relative sb-bookmark”>
<a href=”javascript:;” id=”bookmark”>
<i class=”sb-icon fa fa-star-o” title=”收藏本页” style=”display: inline-block;”></i>
</a>
</div>
<div class=”side-buttons-box relative sb-share”>
<a href=”#”>
<i class=”sb-icon fa fa-share-square-o” title=”一键分享” style=”display: inline-block;”></i>
</a>
<div class=”side-buttons-triangle” style=”display: none;”>
<em class=”border-sj”>◆</em>
<span class=”con-sj”>◆</span></div>
<div class=”sb-layer bdsharebuttonbox bdshare-button-style1-16″ data-tag=”share_1″ data-bd-bind=”1596777484423″ style=”display: none;”>
<a href=”#” class=”bds_mshare” data-cmd=”mshare” title=”一键分享”>一键分享</a>
<a href=”#” class=”bds_tsina” data-cmd=”tsina” title=”分享到新浪微博”>新浪微博</a>
<a href=”#” class=”bds_tqq” data-cmd=”tqq” title=”分享到腾讯微博”>腾讯微博</a>
<a href=”#” class=”bds_renren” data-cmd=”renren” title=”分享到人人网”>人人网</a>
<a href=”#” class=”bds_weixin” data-cmd=”weixin” title=”分享到微信”>微信</a>
<a href=”#” class=”bds_qzone” data-cmd=”qzone” title=”分享到QQ空间”>QQ空间</a>
<a href=”#” class=”bds_douban” data-cmd=”douban” title=”分享到豆瓣”>豆瓣</a>
<a href=”#” class=”bds_twi” data-cmd=”twi” title=”分享到 Twitter”>Twitter</a>
<a href=”#” class=”bds_fbook” data-cmd=”fbook” title=”分享到 Facebook”>Facebook</a></div>
</div>
<div class=”side-buttons-box relative sb-top” style=”display: block;”>
<a href=”#”>
<i class=”sb-icon fa fa-chevron-up” title=”返回顶部”></i>
</a>
</div>
</div>
样式代码如下:
/* ------------------------------------------------------------------------- * * side-buttons /* ------------------------------------------------------------------------- */ .side-buttons { position: fixed; width: 40px; bottom: 15%; right: 25px; z-index: 890; } .side-buttons .relative { position: relative; top: 0; left: 0; } .side-buttons .side-buttons-box { width: 100%; margin-bottom: 3px; background: #38A6A6; text-align: center; border-radius: 3px; } .side-buttons .side-buttons-box > a { display: block; height: 35px; padding-top: 5px; color: #222; text-decoration: none; outline: none; cursor: pointer; } .side-buttons .side-buttons-box > a:hover { background: #21292E; text-decoration: none; color: #c31900; border-radius: 3px; } .side-buttons .side-buttons-box > a:hover .sb-title, .side-buttons .side-buttons-box .sb-title { color: #fff; font-size: 12px; display: block; padding-left: 5px; line-height: 18px; width: 30px; margin-top: -2px; } .side-buttons .current-bg { background: #21292E; text-decoration: none; } .side-buttons .sb-layer { border: 2px solid #EDF1F2; background: #fff; position: absolute; right: 47px; bottom: -44px; border-radius: 5px; } .side-buttons .qr-img { padding: 10px; width: 200px; } .side-buttons .qr-text { padding-bottom: 6px; font-size: 12px; font-weight: 700; } .side-buttons-triangle { width: 12px; height: 40px; position: absolute; right: 45px; bottom: -12px; z-index: 100; } .border-sj, .con-sj { display: block; width: 18px; height: 28px; font-size: 18px; overflow: hidden; font-family: SimSun; } .border-sj { color: #EDF1F2; font-style: normal; } .con-sj { color: #fff; margin: -28px 0 0 -2px; } .side-buttons .bdsharebuttonbox { width: 80px; padding: 10px; } .side-buttons .bdsharebuttonbox a { margin: 3px 0; width: 60px; text-align: left; padding-left: 25px; color: #666; text-decoration: none; outline: none; cursor: pointer; } .side-buttons .side-buttons-box >a i { display: inline-block; color: #fff; font-size: 24px; } .side-buttons .side-buttons-box >a i.fa-chevron-up { margin-top: 2px; font-size: 22px; } .side-buttons .side-buttons-box >a i.fa-qrcode { margin-top: 5px; } .side-buttons .side-buttons-box >a i.fa-share-square-o { margin-top: 5px; font-size: 23px; margin-left: 1px; } .side-buttons .side-buttons-box >a i.fa-star-o { margin-top: 4px; } .side-buttons .side-buttons-box >a i.fa-comment-o { font-size: 20px; margin-top: 5px; } /* ------------------------------------------------------------------------- *
有了代码,如何才能在你的代刷网上显示呢?应该把这些代码放在哪里才有效呢?接下来就跟着我的步骤来操作吧。
首先、打开你的代刷网程序源码,找到你目前使用的模板文件index.php,然后把上面的html复制到最后面</body>前面
然后、然后打开assets/css/common.css文件,把上面的css样式代码复制到最后,保存即可
最后,打开你的QQ代刷网首页,刷新一下页面,也可以去后台更新一下缓存,是不是就出现了效果图里面一样的功能呢?
很久没有分享关于装修美化代刷网的教程了,因为美化装修QQ代刷网的教程没什么用,但是这个功能我是看了确实喜欢,忍不住想分享给大家,喜欢就拿去用吧,记得先备份网站数据以免造成无法挽回的损失。