非常好看的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代刷网的教程没什么用，但是这个功能我是看了确实喜欢，忍不住想分享给大家，喜欢就拿去用吧，记得先备份网站数据以免造成无法挽回的损失。