网站右侧悬浮菜单按钮样式代码
本文摘要：站长简语无聊的小李哥又给大家发教程了，本次教程分享一个右侧悬浮菜单按钮功能给大家，图标需要引入图标库信息，不然图片不显示，当然了！也可以替换成图标图片，那就需要写像素了！为了方便大家，小李哥尽力给大家讲解的详细一些。实战部署首先找到模板下的hea...
版权所有：本文发布于黑渊资源网-黑渊博客_黑渊娱乐网; 转载请保留原文链接：http://www.hx81.cn/post-1079.html
无聊的小李哥又给大家发教程了，本次教程分享一个右侧悬浮菜单按钮功能给大家，图标需要引入图标库信息，不然图片不显示，当然了！也可以替换成图标图片，那就需要写像素了！为了方便大家，小李哥尽力给大家讲解的详细一些。
实战部署
首先找到模板下的header.php公用调试文件，引入如下图标图标库样式。放到</head>标签前面。一共三个图标库，喜欢用哪个就调用哪个，都用也可以，小编是三个都引入了！都特别好看
Awesome图标库
<link rel="stylesheet" type="text/css" media="screen" href="http://你的域名/css/Font/css/font-awesome.min.css"/>
Layui矢量图标库
<link rel="stylesheet" type="text/css" media="screen" href="http://你的域名/css/layui/css/layui.css"/>
iconfont图标库
<link rel="stylesheet" type="text/css" media="screen" href="http://你的域名/css/iconfont/iconfont-embedded.css"/>
引入悬浮JS
<script type="text/javascript" src="http://你的域名/css/layui/layui.js"></script>
随后就是图标库文件样式了，已经打包好了，下载后上传到网站根目录解压即可，如以上图标库文件已经有类似文件可不引入，直接调用即可。
网站输入展示
以上都准备好以后就是展示侧边栏了。把如下代码放入footer.php底部脚本文件实现全站全部页面输出，代码放到<body>标签前面即可。
<ul id="lanyou">
<li class="upper ScrollUp">
<a href="javascript:void(0);"><i class="layui-icon" style="font-size:45px;"></i></a></li>
<li class="lower ScrollUp">
<a href="http://wpa.qq.com/msgrd?v=3&uin=734103205"><i class="layui-icon" style="font-size:30px;"></i></a></li>
<li class="ScrollUp">
<a href="javaScript:qunliao()"><i class="fa fa-qrcode" style="font-size: 25px;" title="加入群聊"></i></a></li>
</ul>
<script>
/**弹出二维码**/
function qunliao(imgurl) {
layer.open({
skin: 'siyuanFormSkin1',
offset: '100px',
type: 1,
title:"站长技术交流群",
content: '<img src="http://www.ouhly.cn/content/templates/ziyuan/Static/images/qqun.png" style="padding: 10px;width: 250px;height: 220px;" alt="weixin"><p style="position: relative;color: #666;text-align: center;margin: 10px 0;font-weight: 800;margin-top: -15px;">扫一扫加入群聊</p>'
});
}
</script>此次教程是通配教程，所有PHP网站通用，JS以及CSS样式可直接在模板内调用，不会的站长就不要瞎搞了！很可能不显示喔。
这是打包好的
发布评论