请选择 进入手机版 | 继续访问电脑版

ylsunyuan技术论坛中心

 找回密码
 注册(请使用中文注册)
搜索
热搜: 活动 交友 discuz
查看: 659|回复: 0

CSS带返回顶部右侧悬浮菜单

[复制链接]

124

主题

127

帖子

619

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
619
发表于 2018-6-8 13:51:13 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>CSS带返回顶部右侧悬浮菜单 - 站长素材</title>

  5. <style type="text/css">
  6.        

  7.         *{margin:0;padding:0;font-family:"Microsoft YaHei";}
  8.         li{list-style:none}
  9.         img{border:none;}
  10.         /*在线客服*/
  11.         .OnlineService_Bg {width:100px;overflow:hidden;position:fixed;right:10px;bottom:20px;z-index:10;}
  12.         .OnlineService_Box {width:100%;overflow:hidden;}
  13.         .OnlineService_QQBox {width:88px;overflow:hidden;border:1px solid #cecece;margin-bottom:10px;background:#f5f5f5;}
  14.         .OnlineService_QQBox li {width:auto;height:35px;overflow:hidden;padding-left:34px;font-size:12px;line-height:35px;color:#666;background:url(icon_QQ1.png) no-repeat 5px center;cursor:pointer}
  15.         .OnlineService_QQBox li:hover {filter:alpha(opacity=50); /*IE滤镜,透明度50%*/-moz-opacity:0.5; /*Firefox私有,透明度50%*/opacity:0.5;/*其他,透明度50%*/}
  16.         .OnlineService_QQBox li a {text-decoration: none;color: #666;}
  17.         .OnlineService_Phone {width:90px;height:90px;margin-bottom:10px;}
  18.         .OnlineService_Phone a {display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Online.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}
  19.         .OnlineService_Sign {width:90px;height:33px;margin-bottom:10px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;cursor:pointer;background-image:url(icon_Sign.png);background-repeat:no-repeat;background-position:center 10px;}
  20.         .OnlineService_Top {width:90px;height:90px;margin-bottom:10px;}
  21.         .OnlineService_Top a {display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Top.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}
  22.          

  23. </style>

  24. </head>
  25. <body style="height:1200px;">
  26. <div class="OnlineService_Bg">
  27.         <div class="OnlineService_Box">
  28.                 <ul class="OnlineService_QQBox"><li><a target="_blank" rel="nofollow" href="http://sc.chinaz.com/">站长素材</a></li></ul>
  29.                 <div class="OnlineService_Phone"><a href="http://sc.chinaz.com/" target="_blank">在线咨询</a></div>
  30.                 <div class="OnlineService_Sign" target="_blank" onclick="http://sc.chinaz.com/">立即试用</div>
  31.                 <div class="OnlineService_Top"><a href="#">返回顶部</a></div>
  32.         </div>
  33. </div>

  34. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  35. <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  36. <p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
  37. </div>
  38. </body>
  39. </html>
复制代码

回复

使用道具 举报

本版积分规则

QQ|Archiver|手机版|小黑屋|ylsunyuan技术论坛 ( 桂ICP备14005218号-1

GMT+8, 2024-3-29 17:13 , Processed in 0.060790 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表