html/css/javascript您现在的位置是:主页 > html/css/javascript >
分享一个简单的在线客服代码 纯css无js 兼容好
标签:客服
2022-04-22 17:36:18html/css/javascript 671人已围观
效果演示
代码
<div class="online_kefu"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><span class="span1"></span><label>在线QQ</label></a></li> <li><a href="tel:010-88885558"><span class="span2"></span><label>010-88885558</label></a></li> <li><a href="#"><span class="span3"></span><label class="lbl_img"><img src="images/weixin.png"></label></a></li> <li><a href="javascript:void(0)" class="gotop" onclick="$('html,body').stop().animate({scrollTop:0},800)"><span class="span4"></span></a></li> </ul> </div> <style> .online_kefu {position: fixed;top: 50%;right: 0;z-index: 1001;} .online_kefu li{list-style:none;} .online_kefu li a {display: block;width: 52px;height: 52px;margin-bottom: 1px;position: relative;background: #00994e;z-index: 1;} .online_kefu li a:hover span, .online_kefu li a:hover label {background-color: #00994e !important;} .online_kefu li:last-child a {border-bottom: 0;} .online_kefu li a span {display: block;width: 52px;height: 52px;position: relative;z-index: 100;background-position: center center;background-repeat: no-repeat;} .online_kefu li:nth-child(2) a, .online_kefu li:nth-child(1) a {z-index: 2;} .online_kefu li a label {display: block;width: 100px;white-space: nowrap;padding: 0 20px;position: absolute;line-height: 52px;color: #fff;z-index: -1;background: #00994e;bottom: 0;left: 100%;box-sizing: inherit;max-width: 300%;} .online_kefu li a:hover label {left: -120px;} .online_kefu li a .lbl_img {padding: 10px;height: auto;line-height: normal;} .online_kefu li a .lbl_img img{max-width:100%;} .online_kefu li a span.span1 {background-image: url(images/full1.png);} .online_kefu li a span.span2 {background-image: url(images/full2.png);} .online_kefu li a span.span3 {background-image: url(images/full3.png);} .online_kefu li a span.span4 {background-image: url(images/full4.png);} </style>
下载
相关文章
随机图文
pbootcms搜索结果页面按照指定的栏目id进行排序实现方法
需求说明: 客户要求搜索结果页面优先展示产品,后展示文章。 解决办法: 一、后台先添加一个定制标签 如下图所示 多个栏目id使用半角逗号隔开,此栏目id就是产品栏目id和文章栏目id 如下图 二、修改搜索模板标签如下pbootcms提示错误 发送失败:服务器已经禁用stream_socket_client和fsockopen函数,请至少开启一个才能发送邮件!
问题描述 解决方案 此方法仅限阿里云虚拟主机,其他主机请联系服务商或者自行检查此设置。eyoucms导航菜单调用一二三级栏目的方法
{eyou:channel type="top" row="60" id="field" currentstyle="active"} <!--一级--> <li class="yiji"><a href="{$field.typeurl}" title="{$field.typename}">{$field.typename}</a> &lpbootcms分页代码改成英文
问题描述: pbootcms怎么才能把所有的分页文字改成英文。如:共多少条 前一页 后一页 首页 尾页改成对应英文 修改文件: /core/view/Paging.php 找到相关中文改成您需要的英文即可。