网站地图 | RSS订阅 凌陈亮博客 - 专业上海SEO上海SEO优化,分享网站优化知识,同时提供上海SEO服务。
你的位置:首页 » 网站制作 » 正文

DIV+CSS浮动代码

2016-1-21 16:11:51 | 作者:凌陈亮 | 3个评论 | 人浏览

纯DIV+CSS浮动代码,无需JS,一般用作浮动QQ客服、淘宝/阿里旺旺、MSN、二维码、图片广告、在线咨询、浮动窗口、联系信息等用途。

以下代码是右侧浮动,可以自己修改为左侧浮动,或把CSS单独出来,或改成整个JS输出,这样只用包含JS就可以了,更方便。

注:样式中包含图片,请下载整个压缩包,以方便自己可以直接本地使用。

<style type='text/css'>
#gw_float { display: block; position: fixed; top: 40%; right: 3px; width: 165px; font-family: Arial, '微软雅黑', '宋体'; font-size: 12px; font-weight: bold; }
#gw_float .top { height: 53px; background: url(gw_float_img/top.gif); }
#gw_float .bottom { height: 21px; background: url(gw_float_img/bottom.gif); }
#gw_float .title { padding-left: 25px; font-size: 12px; font-weight: bold; color: #000; line-height: 30px; background: url(gw_float_img/bg1.gif); }
#gw_float .content { padding-top: 5px; font-size: 12px; line-height: 30px; background: url(gw_float_img/bg.gif); text-align: center; }
* html { overflow-x: auto; overflow-y: hidden; }
* html #gw_float { position: absolute; }
</style>
<div id='gw_float'>
<div class="top"></div>
<div class='title'>客服信息:</div>
<div class='content'>
QQ:<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57404811&site=qq&menu=yes" rel="nofollow"><img border="0" src="http://wpa.qq.com/pa?p=2:57404811:51" alt="点击这里给我发消息" title="点击这里给我发消息" align="absmiddle" /></a><br />
QQ群:<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=a1ad285b18fe13b0bd4eb28e64eb7757c2770650de4d1730bafe250de6ff64f4" rel="nofollow"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="ASP网站制作和优化1群" title="ASP网站制作和优化1群" align="absmiddle" /></a><br />
手机:13023105435<br />
微信:gangwan2433<br />
<img src="http://www.lingchenliang.com//weixin.png" alt="网站二维码" width="134" />
</div>
<div class='bottom'></div>
</div>

在线预览:http://www.lingchenliang.com/demo/htmlcss/gw_float/

下载地址:http://www.lingchenliang.com/demo/htmlcss/gw_float.zip

  • 本文来自: 凌陈亮博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:浮动  QQ  客服  淘宝  阿里  旺旺  MSN  二维码  
  • 已有3位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。