在线咨询

作者：
发布时间：0000-00-00 00:00:00
浏览次数：223

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线咨询</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" />
  <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" />
  <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script>
    
    <style>
    body{font-family:"微软雅黑","Microsoft Yahei";}

#toolBar{
	position: fixed;z-index: 9;
	right: 0;top: 50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
}
#toolBar li{
	position: relative;
}
#toolBar a{
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #000;
	border-bottom: 1px solid #231f1c;
	transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	position: relative;
	z-index: 2;
}
#toolBar li:last-child a{border-bottom: 0;}
#toolBar .txt{
	position: absolute;z-index: 1;
	right: -100px;top: 0;
	background: #f60;

color: #fff;
	padding: 10px;
	line-height: 30px;
	transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
}
#toolBar i{
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
  -webkit-background-size: 24px auto;
	background-size: 24px auto;
}
#toolBar .icon-heart{background-image: url(https://h5.org.cn/images/icon_so.png);}
#toolBar .icon-qa{background-image: url(https://h5.org.cn/images/icon_so.png);}
#toolBar .icon-gas{background-image: url(https://h5.org.cn/images/icon_so.png);}
#toolBar .icon-tele{background-image: url(https://h5.org.cn/images/icon_so.png);}
#toolBar .icon-top{background-image: url(https://h5.org.cn/images/icon_so.png);}
#toolBar li:hover a{background: #f60;}
#toolBar li:hover .txt{right: 100%;}

</style>
</head>
<body>
  
   <ul id="toolBar">
        <li><a href=""><i class="icon-heart"></i></a><span class="txt" style="width: 4em;">售后服务</span></li>
        <li><a href=""><i class="icon-qa"></i></a><span class="txt" style="width: 4em;">常见问题</span></li>
        <li><a href=""><i class="icon-gas"></i></a><span class="txt" style="width: 5em;">使用与保养</span></li>
        <li><a href="tel:4008-933-001"><i class="icon-tele"></i></a><b class="txt" style="width: 8em;">4008-933-001</b></li>
        <li><a href="javascript:;" id="toTop"><i class="icon-top"></i></a></li>
    </ul>
  
</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏