从网上下了一个右侧悬浮客服代码,发现独自浏览的话一点问题都没有,但是加到我的网页中之后就出现了一下的一个空白,哪位大侠告诉我是咋回事啊?比较急~~~~~
HTML:
- HTML code
<DIV id=floatTools class=float0831> <DIV class=floatL><A style="DISPLAY: none" id=aFloatTools_Show class=btnOpen title=查看在线客服 onclick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show();kf_setCookie('RightFloatShown', 0, '', '/', 'www.istudy.com.cn'); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr('style','display:block');" href="javascript:void(0);">展开</A> <A id=aFloatTools_Hide class=btnCtn title=关闭在线客服 onclick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide();kf_setCookie('RightFloatShown', 1, '', '/', 'www.istudy.com.cn'); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr('style','display:none');" href="javascript:void(0);">收缩</A> </DIV> <DIV id=divFloatToolsView class=floatR> <DIV class=tp></DIV><DIV class=cn> <UL> <LI class=top> <H3 class=titZx>QQ咨询</H3> </LI> <LI><SPAN class=icoZx>在线咨询</SPAN> </LI> <LI><A class=icoTc href="#">客服一</A> </LI> <LI><A class=icoTc href="javascript:void(0);">客服二</A> </LI> <LI><A class=icoTc href="#">客服三</A> </LI> <LI class=bot><A class=icoTc href="javascript:void(0);">客服四</A> </LI> </UL> <UL class=webZx> <LI class=webZx-in><A href="#" target="_blank" style="FLOAT: left"><IMG src="images/right_float_web.png" border="0px"></A> </LI> </UL> <UL> <LI> <H3 class=titDh>电话咨询</H3> </LI> <LI><SPAN class=icoTl>400-000-0000</SPAN> </LI> <LI class=bot> <H3 class=titDc><A href="#" target="_blank">在线留言</A></H3> </LI> </UL> </DIV> </DIV> </DIV>
CSS代码:
- CSS code
.float0831 { POSITION: fixed; TOP: 150px;RIGHT: 1px; _position: absolute; } .float0831 A { COLOR: #00a0e9 } .float0831 A:hover { COLOR: #ff8100; TEXT-DECORATION: none } .float0831 .floatL { POSITION: relative; WIDTH: 28px; FLOAT: left } .float0831 .floatL A { TEXT-INDENT: -9999px; DISPLAY: block; FONT-SIZE: 0px } .float0831 .floatR { BACKGROUND: url(../images/float_bg.gif) } .float0831 .tp { BACKGROUND: url(../images/float_bg.gif) } .float0831 .cn { BACKGROUND: url(../images/float_bg.gif) } .float0831 .floatR { PADDING-BOTTOM: 15px; WIDTH: 130px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: -131px bottom; FLOAT: left; OVERFLOW: hidden } .float0831 .tp { BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION:0 0; HEIGHT: 10px; } .float0831 .cn { BACKGROUND-REPEAT: repeat-y; BACKGROUND-POSITION: -262px 0px } .float0831 .cn H3 { TEXT-INDENT: -9999px; HEIGHT: 36px; FONT-SIZE: 0px } .float0831 .cn UL { PADDING-BOTTOM: 0px; PADDING-LEFT: 14px; PADDING-RIGHT: 14px; PADDING-TOP: 0px } .float0831 .cn UL LI { BORDER-BOTTOM: #e6e5e4 1px solid; LINE-HEIGHT: 36px; WORD-WRAP: break-word; HEIGHT: 36px; OVERFLOW: hidden; WORD-BREAK: normal } .float0831 .titZx { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .titDh { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .titDc { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .icoZx { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .icoTc { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .icoFf { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .icoTl { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .btnOpen { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .btnOpen_n { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .btnCtn { BACKGROUND: url(../images/float_s.gif) no-repeat } .float0831 .titZx { BACKGROUND-POSITION: 5px -10px } .float0831 .titDh { BACKGROUND-POSITION: 5px -66px } .float0831 .titDc { BACKGROUND-POSITION: 5px -124px } .float0831 .icoZx { BACKGROUND-POSITION: 2px -154px } .float0831 .icoTc { BACKGROUND-POSITION: 0px -323px } .float0831 .icoFf { BACKGROUND-POSITION: 2px -213px } .float0831 .icoTl { PADDING-LEFT: 20px; DISPLAY: block; FONT-FAMILY: "微软雅黑"; BACKGROUND-POSITION: 2px -266px; FLOAT: left } .float0831 .btnOpen { BACKGROUND-POSITION: -30px -396px } .float0831 .btnOpen_n { BACKGROUND-POSITION: 0px -530px } .float0831 .btnCtn { BACKGROUND-POSITION: 0px -396px } .float0831 .icoZx { PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left } .float0831 .icoTc { PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left } .float0831 .icoFf { PADDING-LEFT: 28px; DISPLAY: block; FLOAT: left } .float0831 .btnOpen { POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px } .float0831 .btnOpen_n { POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px } .float0831 .btnCtn { POSITION: relative; WIDTH: 28px; HEIGHT: 118px; TOP: 80px; LEFT: 2px } .float0831 .btnOpen { TOP: 118px; LEFT: 1px } .float0831 .btnOpen_n { TOP: 118px; LEFT: 1px } .float0831 .btnCtn { TOP: 118px; LEFT: 2px } .float0831 UL LI H3.titDc A { WIDTH: 80px; DISPLAY: block; HEIGHT: 36px } .float0831 UL LI.top { BORDER-BOTTOM: #ace5f9 1px solid } .float0831 UL LI.bot { BORDER-BOTTOM-STYLE: none } .float0831 UL.webZx { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 164px; PADDING-RIGHT: 0px; BACKGROUND: url(../images/webZx_bg.jpg) no-repeat; HEIGHT: 65px; PADDING-TOP: 0px } .float0831 UL LI.webZx-in { BORDER-BOTTOM-STYLE: none; PADDING-LEFT: 5px; HEIGHT: 50px; PADDING-TOP: 8px }