“联合缴费系统”为文字--隐藏
帐号、密码、验证码、登陆、重置等为文字--隐藏
网格及后面的白色背景那一块--单独切片导出成GIF（颜色数可以选32左右），这样就非常小
按钮---单独切片导出成JPG（品质可以选40-60，自己看左侧效果）
“联合缴费系统”上面的圆角约5个像素高度那一行--单独切片导出成JPG
LOGO--单独导出成JPG
蓝色的左边框和右边框--单独切片导出成JPG（高度只需1像素，左右边框连白色背景一起切）
底部圆角轮廓--单独切片导出成JPG（高度切5像素，连白色背景一起切）
联合缴费系统后面的渐变背景--单独切片导出成GIF（宽度为1像素、高度为从亮部到暗部的整个渐变）
上面这些切片导出要在“存储为web和设备所用格式”中导出。
关于制作：
上面图像导出后应该是非常小了，做成网页应该也不难，因为时间问题我就不制作了。
有不懂的再交流吧！
这个很好用，ie6-7-8 谷歌都兼容。你看下是不是这个。图片背景的话可以发送到你邮箱<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>QQ客服</title>
<style type="text/css">
img{border:0}
ul,li{padding:0margin:0}
.QQbox {z-index:99left:0width:128pxheight:234pxposition:absolute}
.QQbox .press{left:0width:36pxcursor:pointerposition:absoluteheight:128px}
.QQbox .Qlist{left:0width:131pxposition:absoluteheight:234pxbackground:url(floatServiceBj.gif) no-repeat left center}
.QQbox .Qlist ul{padding:43px 0 0 21px}
.QQbox .Qlist li{height:26pxmargin-bottom:11px_margin-bottom:7pxlist-style-type:nonemargin-left:14px}
</style>
<script type="text/javascript">
window.onload = window.onresize = window.onscroll = function ()
{
var oBox = document.getElementById("divQQbox")
var oLine = document.getElementById("divOnline")
var oMenu = document.getElementById("divMenu")
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop
setTimeout(function ()
{
clearInterval(oBox.timer)
var iTop = parseInt((document.documentElement.clientHeight - oBox.offsetHeight)/2) + iScrollTop
oBox.timer = setInterval(function ()
{
var iSpeed = (iTop - oBox.offsetTop) /2
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (oBox.style.top = oBox.offsetTop + iSpeed + "px")
}, 30)
}, 100)
oBox.onmouseover = function ()
{
this.style.width = 131 + "px"
oLine.style.display = "block"
oMenu.style.display = "none"
}
oBox.onmouseout = function ()
{
this.style.width = ''
oLine.style.display = "none"
oMenu.style.display = "block"
}
}
</script>
</head>
<body style="height:1310pxwidth:1421pxbackground:url(BG.jpg) no-repeat">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!--在线客服 begin -->
<div class="QQbox" id="divQQbox" >
<div class="Qlist" id="divOnline" style="display:none">
<ul>
<a></a>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号码:41"></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号码:41"></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号码:41"></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号码:41"></a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:你的QQ号码:41 "></a></li>
</ul>
</div>
<div id="divMenu"><img src="floatService1.gif" class="press" alt="在线客服"></div>
</div>
</body>
</html>
一般情况下都是用CSS的fixed固定定位，但不兼容IE6，在IE6下，用absolute方式。
下面给出简单的兼容写法代码实现。仅供参考：
<style>*{margin:0px padding:0px}
body {height:2000px}
div {width:100px height:100px background:#ccc position:absolute bottom:0px right:0px}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1')
if(window.navigator.userAgent.indexOf('MSIE 6') != -1)
{
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop
oDiv.style.top = top + 'px'
}
}
else
{
oDiv.style.position='fixed'
}
}
</script>
