wordpress在线客服 纯css打造

纯css打造漂亮的wordpress在线客服,实现效果如下:

111 纯css打造漂亮的wordpress在线客服

.sidebar{
position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius:8px 0 0 8px; z-index:999999;
}
.sidebar li{
height: 50px; width: 160px; padding-left: 17px; border-radius:8px 0 0 8px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar li img{
display: block;
}
.sidebar li:hover{
margin-left: -105px; background: rgba(0,0,0,0.6);
}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
li{list-style:none;}

div显示层

<div class=”sidebar”>
<ul>
<li><a href=”tencent://message/?uin=29525487&Site=bdesign.com.cn&Menu=yes” target=”_blank”><img src=”imgs/img58.png”></a></li>
<li><a href=”#”><img src=”imgs/img59.png”></a></li>
<li><a href=”#”><img src=”imgs/img611.png”></a></li>
<li><a href=”#”><img src=”imgs/email.png”></a></li>
<li><a href=”#hero”><img src=”imgs/img60.png”></a></li>
</ul>
</div>

结合wordpress主题实现纯css在线客服,这种效果可以避免坑爹的jquery冲突问题。直接在实例的代码copy到主题的footer.php或者主题选项都可以。

上述两段代码都是加在footer.php

给TA打赏
共{{data.count}}人
人已打赏
WP实用教程

WordPress企业主题手机端底部添加菜单栏功能怎么用纯代码实现?纯代码实现WordPress主题手机端底部菜单

2018-10-24 11:45:19

WP实用教程

WordPress企业主题怎么通过短代码显示指定文章内容

2018-12-20 12:01:34


版权免责声明

本资源仅用于个人学习测试使用,禁止用于任何商业环境,请于下载后24小时内 删除本资源!

本文所有相关技术/资源内容统一放在下载包里

  1. 1、本网站名称:指点聚源码
  2. 2、本站永久网址:https://www.zhidianju.com
  3. 3、站内所有资源均可通过日常签到等任务进行免费兑换,记得每日来本站签到哦~!(由于模板不是很完善签到 需刷新一下!)。
  4. 4、如果您觉得本站有帮助到您,也想给本站一些帮助。您可以再下方打赏本站。
  5. 5、如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
  6. 6、本站资源来源于互联网收集/个人购买,如有侵犯到您的权益,请查看【版权声明】
  7. 7、本站提供的所有资源均来自互联网搜索,站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁 止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支 持你喜欢的作者,谢谢!
  8. 8、本站资源大多存储在云盘,如发现链接失效 【链接失效】 我们会第一时间更新。本站提供的源码、模板、软件工具等其他资源, 都不包含技术服务 请大家谅解!
  9. 9、如遇到加密压缩包,默认解压密码为"www.zhidianju.com",如遇到无法解压的请联系管理员!
  10. 10、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索