超好看网站右侧客服代码_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

超好看网站右侧客服代码
2021-5-16 1411 0
超好看网站右侧客服代码，非常好看可全屏
代码已分享，可自己稍修改即可使用！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超好看网站右侧客服代码</title>
<link rel="stylesheet" href="http://oss.8gws.com/o_1f5q8brsna1ickns7140vbta.css" type="text/css" media="all">
<link rel="stylesheet" href="https://lib.baomitu.com/layer/3.1.1/theme/default/layer.css" type="text/css" media="all">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1444248_u240hsu9sns.css">
</head>
<body>
    <style type="text/css">
        body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.5 'Microsoft YaHei','微软雅黑',Helvetica,Sans-serif;
            min-width: 1200px;
            background: #f0f1f3;
        }

        :focus {
            outline: 0;
        }

        h1, h2, h3, h4, h5, h6, strong {
            font-weight: 700;
        }

        a {
            color: #428bca;
            text-decoration: none;
        }

            a:hover {
                text-decoration: underline;
            }

        .error-page {
            background: #f0f1f3;
            padding: 80px 0 180px;
        }

        .error-page-container {
            position: relative;
            z-index: 1;
        }

        .error-page-main {
            position: relative;
            background: #f9f9f9;
            margin: 0 auto;
            width: 617px;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 50px 50px 70px;
        }

            .error-page-main:before {
                content: '';
                display: block;
                background: url(img/errorPageBorder.png?1427783409637);
                height: 7px;
                position: absolute;
                top: -7px;
                width: 100%;
                left: 0;
            }

            .error-page-main h3 {
                font-size: 24px;
                font-weight: 400;
                border-bottom: 1px solid #d0d0d0;
            }

                .error-page-main h3 strong {
                    font-size: 54px;
                    font-weight: 400;
                    margin-right: 20px;
                }

            .error-page-main h4 {
                font-size: 20px;
                font-weight: 400;
                color: #333;
            }

        .error-page-actions {
            font-size: 0;
            z-index: 100;
        }

            .error-page-actions div {
                font-size: 14px;
                display: inline-block;
                padding: 30px 0 0 10px;
                width: 50%;
                -ms-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                color: #838383;
            }

            .error-page-actions ol {
                list-style: decimal;
                padding-left: 20px;
            }

            .error-page-actions li {
                line-height: 2.5em;
            }

            .error-page-actions:before {
                content: '';
                display: block;
                position: absolute;
                z-index: -1;
                bottom: 17px;
                left: 50px;
                width: 200px;
                height: 10px;
                -moz-box-shadow: 4px 5px 31px 11px #999;
                -webkit-box-shadow: 4px 5px 31px 11px #999;
                box-shadow: 4px 5px 31px 11px #999;
                -moz-transform: rotate(-4deg);
                -webkit-transform: rotate(-4deg);
                -ms-transform: rotate(-4deg);
                -o-transform: rotate(-4deg);
                transform: rotate(-4deg);
            }

            .error-page-actions:after {
                content: '';
                display: block;
                position: absolute;
                z-index: -1;
                bottom: 17px;
                right: 50px;
                width: 200px;
                height: 10px;
                -moz-box-shadow: 4px 5px 31px 11px #999;
                -webkit-box-shadow: 4px 5px 31px 11px #999;
                box-shadow: 4px 5px 31px 11px #999;
                -moz-transform: rotate(4deg);
                -webkit-transform: rotate(4deg);
                -ms-transform: rotate(4deg);
                -o-transform: rotate(4deg);
                transform: rotate(4deg);
            }
    </style>
</head>
<body>
    <div class="error-page">
        <div class="error-page-container">
            <div class="error-page-main">
                <h3>
                    <strong>网站右侧客服代码</strong>
<br />小辉网旗下网站：<br />
<a href="http://www.8gws.com" target="_blank">小辉工作室</a><br />
<a href="http://bbs.8gws.com" target="_blank">小辉社区网</a><br />
<a href="http://host.8gws.com" target="_blank">小辉建站网</a><br />
<a href="http://tp.8gws.com" target="_blank">小辉导航网</a><br /><br /><br /><br /><br /><br />交流QQ群：97588668
                </h3>
 <!--代码开始-->
<div class="float-box">
  	<ul class="float-ul float-radius float-text dbsvip" style="box-shadow: 0px 0px 8px 8px rgba(255, 12, 0, 0.42);">
		<li>
			<a rel="nofollow"class="qq float-border float-text dbsvipa" target="_Blank">
				<i class="layui-icon layui-icon-diamond" style="font-size: 18px;"></i><br>SVIP				
				<div class="float-alert-box float-radius float-qq-box" style="display: none;">
					<h6 style="color: #ff402f;">功能开发中</h6>
					<p>功能开发中<br>功能开发中</p>
					<div rel="nofollow" class="float-qq-btn float-radius dbsvipd" onclick="#">功能开发中</div>
				</div>
			</a>
		</li>
	</ul>
	
  	<ul class="float-ul float-radius float-text">
      <li>
	<li>
  	<ul class="float-ul float-radius float-text">
      <li>
                  <a rel="nofollow"class="click-qiandao zzhuti_qd_1" href="http://bbs.8gws.com/?plugin=tougao" etap="to_top" title="投稿内容">
                <i class="iconfont icon-Sign"></i><br>投稿</a>
            		</li>
	</ul>
  
<ul class="float-ul float-radius float-text">
		<li>
			<a  rel="nofollow"class="qq float-border float-text" href="https://wpa.qq.com/msgrd?v=3&uin=3131282664&site=qq&menu=yes" target="_Blank" >
				<i  class="iconfont icon-qq"></i><br>客服				
				<div class="float-alert-box float-radius float-qq-box" style="display:none;">
					<h6>商务合作客服</h6>
					<p>问题就进群问<br>客服不处理辅助问题</p>
					<div  rel="nofollow"class="float-qq-btn float-radius" onclick="window.open('https://wpa.qq.com/msgrd?v=3&uin=3131282664&site=qq&menu=yes','_blank')">点击联系合作</div>
				</div>
			</a>
</li>
<li>
<a rel="nofollow" class="qq float-border float-text" href="https://jq.qq.com/?_wv=1027&k=ErVDlE6F" target="_Blank">
<i class="layui-icon layui-icon-group"></i><br>Q群
<div class="float-alert-box float-radius float-qq-box" style="display:none;">
<h6>交流群</h6>
<p>交流群<br>技术网友的聚集地</p>
<div class="float-qq-btn float-radius" onclick="window.open('https://jq.qq.com/?_wv=1027&k=ErVDlE6F','_blank')">点击加入</div>
</div>
</a>

</ul>
	<ul class="float-ul float-radius float-text">
		<li>
			<a rel="nofollow" class="fankui float-border float-text" href="http://bbs.8gws.com/27.html" target="_Blank" title="商务合作">
				<i class="layui-icon layui-icon-username"></i><br>合作</a>
		</li>
		<li>
			<a rel="nofollow"class="fankui float-border float-text" href="http://www.8gws.com" target="_Blank" title="反馈问题">
				<i class="layui-icon layui-icon-survey"></i><br>反馈</a>
		</li>
		<li>
			<a rel="nofollow"class="float-border float-text" onclick="toggleFullScreen(event)" id="to_full" title="点击全屏">
				<i class="iconfont icon-quanping"></i><br>全屏
			</a>
		</li>
	</ul>
  	<ul class="float-ul float-radius float-text">
		<li>
			<a rel="nofollow"class="float-border float-text" id="to_top" title="返回顶部">
				<i class="iconfont icon-top1"></i><br>
			</a>
		</li>
	</ul>

</div>
<script>
$(".qq").hover(function () {
	$(this).children(".float-qq-box").show()
},function() {
	$(this).children(".float-qq-box").hide()
});
$(".weixin").hover(function () {
	$(this).children(".float-weixin-box").show()
},function() {
	$(this).children(".float-weixin-box").hide()
});
</script>
    <script charset="utf-8" src="http://oss.8gws.com/o_1f5q8r85ofb1tth1hp91q4q847a.js"></script>
    <script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: 'auto' //设置容器宽度
    ,height: '300' //设置容器宽度
    ,arrow: 'hover' //始终显示箭头
    ,anim: 'fade'
  });
});
// $(window).scroll(function () {
//         var bodyTop = 0,
//         //bodyHeight = $(window).height(),
// 			 sideTop = $('.navlan').eq(0).height() + 0;
//         if (typeof window.pageYOffset != 'undefined') {
//             bodyTop = window.pageYOffset;
//         } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
//             bodyTop = document.documentElement.scrollTop;
//         } else if (typeof document.body != 'undefined') {
//             bodyTop = document.body.scrollTop;
//         }
//         if (bodyTop > sideTop) {
//           $('.navlan').css({'position':'fixed','top':'0','z-index':'99'});
        
//         } else {
//             $('.navlan').css({position:'relative'});
			

//         }
//     });  
</script>
</body>
</html>
Plugins by frpkj.com
下载地址：
文件名称：超好看网站右侧客服代码
文件大小：240KB适用版本：PC
更新日期：2021-05-16作者信息：小辉网络
点击下载 查看演示
上一篇: WordPress最新modown收费模板
下一篇: 爱,死亡和机器人第二季百度云1080P完整版全集