以下代码存为一个用户控件ascx文件,在你要引用的地方引用就行了:
<%@ Control Language="C#" AutoEventWireup="true" %>
<!--浮动QQ客服代码开始 -->
<link href="../Css/qq.css" rel="stylesheet" type="text/css" />
<div class="kfoutbox" id="kfoutbox" style="top: 401px;">
<div class="kfbox" id="kfinbox">
<div class="kf54kefuqqtop">
<img src="../Images/kefu_up.gif" alt="关闭"><div class="kfboxclose" id="kfboxclose">
</div>
</div>
<div class="kf54kefuqqbg">
<div class="kefu54kefunetli">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号1&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号1:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
</div>
<div class="kefu54kefunetli">
<a target="_blank" href=" http://wpa.qq.com/msgrd?v=3&uin=你的QQ号2&site=qq&menu=yes"> <img border="0" src=" http://wpa.qq.com/pa?p=2:你的QQ号2:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
</div>
<div style="clear: both;">
</div>
</div>
<div class="kf54kefuqqbottom">
<a href="../contact.aspx">
<img src="../Images/kefu_down.gif"></a></div>
</div>
<div class="kfboxmenu kfboxmenuright" id="kfboxmenu">
</div>
<div style="clear: both;">
</div>
</div>
<div style="clear: both;">
</div>
<script type="text/javascript">
var online=new Array();
online[0]=0;online[1]=0;online[2]=0;
var default_top_ps = 350;//顶部
var evans_agt = navigator.userAgent.toLowerCase();
var evans_ie = ((evans_agt.indexOf("msie") != -1) && (evans_agt.indexOf("opera") == -1) && (evans_agt.indexOf("omniweb") == -1));
var evans_mymovey = new Number();
function evans_IeTrueBody() {
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body
}
function evans_GetScrollTop() {
return evans_ie ? evans_IeTrueBody().scrollTop: window.pageYOffset
}
function evans_heartBeat() {
evans_diffY = evans_GetScrollTop();
evans_mymovey += Math.floor((evans_diffY - document.getElementById('kfoutbox').style.top.replace("px", "") + default_top_ps) * 0.1);
document.getElementById('kfoutbox').style.top = evans_mymovey + "px"
}
var evans_tmpintval = window.setInterval("evans_heartBeat()", 1);
if (document.getElementById('kfboxclose')) {
document.getElementById('kfboxclose').onclick = function() {
window.clearInterval(evans_tmpintval);
document.getElementById('kfoutbox').style.display = 'none'
}
}
</script>
<!--浮动QQ客服代码结束 -->
相关的CSS文件:
@charset "utf-8";
.kfoutbox{position: absolute; z-index:10000;margin: 0px;}
.kfoutbox .kfboxmenu{width:29px; height:180px; background:url(../images/r.gif) no-repeat;margin: 0px;}
.kfoutbox .kfboxmenuleft{background:url(../images/l.gif) no-repeat;margin: 0px;}
.kfoutbox .kfbox{height:auto; width:110px; overflow:hidden; font-size:12px; text-align:center; font-family:"宋体",Verdana, Geneva, sans-serif;margin: 0px;}
.kfoutbox .kfbox a{text-decoration:none; color:#666666;}
.kfoutbox .kfbox img{border:none;}
.kfoutbox .kfbox .kf54kefuqqtop{width:110px; margin: 0px; padding: 0px;}
.kfoutbox .kfbox .kf54kefuqqtop img{
margin: 0px;
padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqtop .kfboxclose{
width:30px; height:40px; position:absolute; top:0px; right:0px; cursor:pointer; overflow: hidden;text-align:right;
}
.kfoutbox .kfbox .kf54kefuqqinfo{
background:url(../Images/kefu_middle.gif) repeat-y;
height:25px;
line-height:25px;
font-weight:700;
padding-right: 8px;
padding-left: 8px;
margin: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg{
background:url(../Images/kefu_middle.gif) repeat-y;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 0px;
}
.kfoutbox .kfbox .who{clear:both; text-align:right; font-size:9px; padding-right:10px; margin-top:5px;}
.kfoutbox .kfbox .kf54kefuqqbottom{
margin: 0px;
padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli
{
padding: 5px 5px 0px 17px;
list-style-type: none;
margin: 0px;
float: left;
font-family: "宋体";
font-size: 12px;
width: 110px;
text-align: left;
line-height: 22px;
background: url(../Images/kefu_middle.gif) repeat-y;
height: 30px;
margin-top: 15px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli p{
margin: 0px;
padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetgroup{
list-style-type:none;
margin: 0px;
float: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
font-family: "宋体";
font-size: 12px;
width: 110px;
text-align: left;
line-height: 22px;
background:url(../Images/kefu_middle.gif) repeat-y;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetgroup p{
margin: 0px;
padding: 0px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunetpicimg {
text-indent: 4px;
float: left;
margin: 0px;
padding: 0px;
width: 30px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunettxt {
text-indent: 4px;
float: left;
margin: 0px;
padding: 0px;
width: 70px;
}
.kfoutbox .kfbox .kf54kefuqqbg .kefu54kefunetli .kefu54kefunetpicimgcenter {
float: left;
text-align: center;
width: 100px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
.kfoutbox
{
left: 15px; /*控制左右*/
/*kf54kefuqqtop: 50px;*/
}
.kfboxmenu
{
display: none;
}
图片我就不上传了, 自己去网上找找吧。