特效描述:css3 悬浮淘宝在线客服,css3悬浮在线客服、鼠标悬停图标显示文字、淘宝阿里旺旺在线客服代码。
代码部署教程
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/waiter.css">
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/waiter.css">
2. HTML代码
<!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>
</head>
<body style="background-color:#efefef;height:2000px;">
<!-- 代码 开始 -->
<div class="wuyou-waiter">
<ul class="waiter-ul">
<li class="wuyou-shop">
<a class="iconfont icon-taobao" href="#" target="_blank">
</a>
<div class="waiter-title">
淘宝官店</div>
</li>
<li class="wuyou-contact">
<a class="iconfont icon-aliww" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E7%AC%A8%E5%A4%B4%E7%AC%A8%E8%84%911234
&siteid=cntaobao&status=1&charset=utf-8" target="_blank"></a>
<div class="waiter-title">
联系客服</div>
</li>
<li class="wuyou-top">
<a class="iconfont icon-Upward" href="#">
</a>
<div class="waiter-title">
回到顶部</div>
</li>
</ul>
</div>
<!-- 代码 结束 -->
</body>
</html>