css3悬浮的淘宝qq在线客服代码

铜型材 2019-11-22 140 阅读

特效描述: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>

演示地址下载地址

最新游戏