CSS带返回顶部右侧悬浮菜单
<!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/html; charset=UTF-8">
<title>CSS带返回顶部右侧悬浮菜单 - 站长素材</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"Microsoft YaHei";}
li{list-style:none}
img{border:none;}
/*在线客服*/
.OnlineService_Bg {width:100px;overflow:hidden;position:fixed;right:10px;bottom:20px;z-index:10;}
.OnlineService_Box {width:100%;overflow:hidden;}
.OnlineService_QQBox {width:88px;overflow:hidden;border:1px solid #cecece;margin-bottom:10px;background:#f5f5f5;}
.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}
.OnlineService_QQBox li:hover {filter:alpha(opacity=50); /*IE滤镜，透明度50%*/-moz-opacity:0.5; /*Firefox私有，透明度50%*/opacity:0.5;/*其他，透明度50%*/}
.OnlineService_QQBox li a {text-decoration: none;color: #666;}
.OnlineService_Phone {width:90px;height:90px;margin-bottom:10px;}
.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}
.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;}
.OnlineService_Top {width:90px;height:90px;margin-bottom:10px;}
.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}
</style>
</head>
<body style="height:1200px;">
<div class="OnlineService_Bg">
<div class="OnlineService_Box">
<ul class="OnlineService_QQBox"><li><a target="_blank" rel="nofollow" href="http://sc.chinaz.com/">站长素材</a></li></ul>
<div class="OnlineService_Phone"><a href="http://sc.chinaz.com/" target="_blank">在线咨询</a></div>
<div class="OnlineService_Sign" target="_blank" onclick="http://sc.chinaz.com/">立即试用</div>
<div class="OnlineService_Top"><a href="#">返回顶部</a></div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
页:
[1]