html侧导航栏客服栏

ico 替换 ICO

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>返回顶部</title><script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>	</head><body><div style="height:8000px;"></div><div class="side"><style>*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* side */.side{display: none;position:fixed;width:54px;height:275px;right:0;top:214px;z-index:100;}.side ul li{width:54px;height:54px;float:left;position:relative;border-bottom:1px solid #ffffff;}.side ul li .sidebox{position:absolute;width:54px;height:54px;top:0;right:0;transition:all 0.3s;background:#000;opacity:0.8;filter:Alpha(opacity=80);color:#fff;font:14px/54px "微软雅黑";overflow:hidden;}.side ul li .sidetop{width:54px;height:54px;line-height:54px;display:inline-block;background:#000;opacity:0.8;filter:Alpha(opacity=80);transition:all 0.3s;}.side ul li .sidetop:hover{background:#ae1c1c;opacity:1;filter:Alpha(opacity=100);}.side ul li img{float:left;}.m-svg{width: 34px;height: 34px;padding: 10px;background-color:#fd5a0f;}.m-svg path{fill: #ffffff !important;}.m-svg-contact{width: 25px;height: 25px;}.m-svg-contact path{fill: #ffffff !important;}.side1 {width: 54px;height: 150px;background: #333333;text-align: center;transition: all 0.5s;display: flex;align-items: center;justify-content: center;}.side1 a,.side1 img,.side1 i,.side1 span {display: block;text-decoration: none;}.side1 img {margin: 0 auto;}.side1 i {margin: 10px auto;width: 1px;height: 0px;background: #fff;transition: all 0.5s ease;}.side1 span {color: #fff;font-size: 14px;writing-mode: vertical-lr;margin: 0 auto;letter-spacing: 2px;}.side1:hover {background: #151515;}.side1:hover a img {animation: jitter 0.5s;}</style><ul><div class="side1"><a href="contact.html"><svg class="m-svg-contact" t="1661820159573" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5889" width="200" height="200" class="icon"><path d="M800.941 406.572a363.67 363.67 0 0 1-2.763 25.749C776.735 580.909 658.932 688.77 518.094 688.77H472.22l-8.406 8.764c31.631 58.692 90.435 97.028 156.53 97.028h45.593l90.226 94.185a30.17 30.17 0 0 0 21.808 9.327c3.777 0 7.586-0.71 11.257-2.186 11.43-4.57 18.909-15.668 18.909-27.981v-76.995c83.988-17.422 146.168-96.328 146.168-191.625 0-97.472-66.654-178.233-153.365-192.715z" fill="" p-id="5890"></path> <path d="M755.185 426.126c2.1-14.6 3.112-27.722 3.112-40.17 0-142.983-107.756-259.337-240.202-259.337h-207.53c-132.46 0-240.221 116.354-240.221 259.338 0 128.374 84.829 234.279 198.528 255.466v109.324a35.16 35.16 0 0 0 22.053 32.62c4.262 1.699 8.685 2.546 13.072 2.546 9.436 0 18.65-3.803 25.412-10.857l124.25-129.748h64.436c119.042 0.001 218.742-92.174 237.09-219.182zM243.792 305.801h337.615c9.438 0 17.13 8.124 17.13 18.106 0 9.986-7.692 18.096-17.13 18.096H243.792c-9.455 0-17.139-8.11-17.139-18.096 0-9.982 7.683-18.106 17.139-18.106z m202.705 167.99H243.792c-9.455 0-17.139-8.105-17.139-18.075 0-10.007 7.684-18.13 17.139-18.13h202.705c9.436 0 17.144 8.123 17.144 18.13 0 9.97-7.708 18.074-17.144 18.074z" fill="" p-id="5891"></path></svg> <i></i> <span>CONTACT</span></a></div><li><a href="#"><div class="sidebox" style="opacity: 0.8; background: rgb(0, 0, 0);"><svg class="m-svg"  class="m-svg"  t="1718879012633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="200" height="200"><path d="M511.872427 0h0.256C794.45376 0 1024.000427 229.674667 1024.000427 512s-229.589333 512-511.872 512c-104.106667 0-200.704-31.018667-281.6-84.565333L33.707093 1002.325333l63.786667-190.250666A508.245333 508.245333 0 0 1 0.000427 512C0.000427 229.674667 229.58976 0 511.872427 0zM365.39776 281.429333c-9.770667-23.338667-17.194667-24.234667-32-24.832A285.525333 285.525333 0 0 0 316.50176 256c-19.285333 0-39.424 5.632-51.626667 18.048C250.155093 289.109333 213.33376 324.266667 213.33376 396.501333c0 72.149333 52.778667 141.952 59.861333 151.722667 7.424 9.728 102.912 160 251.093334 221.226667 115.925333 47.914667 150.314667 43.477333 176.725333 37.845333 38.528-8.277333 86.826667-36.693333 98.986667-70.954667 12.16-34.346667 12.16-63.616 8.618666-69.845333-3.584-6.186667-13.354667-9.728-28.16-17.152-14.848-7.381333-86.869333-42.88-100.522666-47.616-13.354667-4.992-26.069333-3.242667-36.138667 10.965333-14.250667 19.797333-28.16 39.936-39.466667 52.053334-8.874667 9.472-23.424 10.666667-35.541333 5.632-16.298667-6.826667-61.952-22.784-118.314667-72.789334-43.562667-38.741333-73.216-86.954667-81.792-101.418666-8.618667-14.805333-0.896-23.381333 5.930667-31.36 7.381333-9.173333 14.506667-15.658667 21.930667-24.234667 7.424-8.576 11.52-13.013333 16.298666-23.082667 5.034667-9.770667 1.493333-19.84-2.090666-27.221333-3.541333-7.381333-33.194667-79.573333-45.354667-108.8z" fill="#FFFFFF" p-id="2281"></path></svg><p style="float: right; margin-right: 10px;">8615987771811</p></div></a></li><li><a href="#"><div class="sidebox" style="opacity: 0.8; background: rgb(0, 0, 0);"><svg  class="m-svg" t="1718879359286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4247" width="200" height="200"><path d="M916.1728 455.5264c-53.2992 0-149.9136-19.2-180.0192-49.3056-18.4832-18.4832-22.8352-41.6256-26.368-60.2624-4.352-22.9376-6.9632-29.7472-16.9984-34.0992-46.1824-19.8656-112.4352-31.232-181.8112-31.232-68.608 0-134.144 11.2128-179.8144 30.72-9.9328 4.2496-12.4928 11.0592-16.7424 33.9456-3.4816 18.688-7.7824 41.9328-26.2144 60.3648-16.7936 16.7936-51.968 28.3648-78.4896 35.072a431.616 431.616 0 0 1-100.5056 13.6704c-33.9968 0-56.9856-6.4512-70.2464-19.7632a122.0096 122.0096 0 0 1-35.072-75.1104C1.9968 336.1792 6.5024 301.568 38.7072 269.312c52.3264-52.3264 122.6752-93.1328 209.2032-121.2416 79.5648-25.9072 170.0864-39.5776 261.8368-39.5776 92.3648 0 183.6544 13.824 263.9872 40.0384 87.296 28.4672 158.3616 69.6832 211.1488 122.5216 53.76 53.76 40.448 125.0816 0.6144 164.9152-13.1584 13.1584-35.84 19.5584-69.3248 19.5584zM510.976 229.4272c77.1584 0 148.8896 12.5952 202.0352 35.3792 36.5056 15.6672 42.6496 48.0256 47.104 71.5776 2.6624 14.08 4.9664 26.2656 12.288 33.5872 12.9024 12.9024 87.3472 34.3552 143.8208 34.3552 24.6272 0 32.4096-4.1984 33.3824-4.8128 15.872-16.0768 35.7376-55.6032-0.8704-92.2624-92.416-92.416-256.512-147.5584-438.9888-147.5584-180.992 0-343.5008 54.528-434.8416 145.8176-14.7456 14.7456-21.504 31.5392-20.0192 49.8688 1.28 15.4624 8.704 31.4368 19.968 42.8032 0.9728 0.6144 8.8576 5.0176 34.304 5.0176 56.2176 0 130.0992-21.0432 142.7968-33.7408 7.2192-7.2192 9.472-19.4048 12.0832-33.4848 4.4032-23.6544 10.3936-56.064 46.9504-71.68 52.5312-22.4768 123.5456-34.816 199.936-34.816z" fill="#ffffff" p-id="4248"></path><path d="M844.8 921.6h-665.6a121.4976 121.4976 0 0 1-122.2656-129.28c0.2048-3.9424 6.0416-97.3312 65.024-191.4368a384 384 0 0 1 137.5232-131.9424C329.1648 429.568 414.1056 409.6 512 409.6s182.8352 19.968 252.5184 59.3408a383.1296 383.1296 0 0 1 137.5232 131.9424c58.9824 94.1568 64.8192 187.5456 65.024 191.4368A121.6512 121.6512 0 0 1 844.8 921.6zM512 460.8c-159.5904 0-275.8656 55.7056-345.5488 165.5296-52.736 83.0976-58.3168 168.0384-58.368 168.9088-1.1264 20.0704 5.6832 38.9632 19.0976 53.1456s31.8976 22.016 52.0704 22.016h665.6c20.1216 0 38.6048-7.8336 52.0704-22.016s20.224-33.0752 19.0976-53.1968c-0.0512-0.8192-5.6832-85.76-58.368-168.8576C787.9168 516.5056 671.6416 460.8 512.1024 460.8z" fill="#ffffff" p-id="4249"></path><path d="M512 819.2c-84.6848 0-153.6-68.9152-153.6-153.6s68.9152-153.6 153.6-153.6 153.6 68.9152 153.6 153.6-68.9152 153.6-153.6 153.6z m0-256c-56.4736 0-102.4 45.9264-102.4 102.4s45.9264 102.4 102.4 102.4 102.4-45.9264 102.4-102.4-45.9264-102.4-102.4-102.4z" fill="#ffffff" p-id="4250"></path></svg><p style="float: right; margin-right: 10px;">8615987771811</p></div></a></li><li><a href="#"><div class="sidebox" style="opacity: 0.8; background: rgb(0, 0, 0);"><svg  class="m-svg" t="1718879413353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2300" width="200" height="200"><path d="M917.504 213.312H104.576l404.544 248.256 408.384-248.256z m21.12 91.072l-429.76 260.48-0.128 0.256-423.424-259.392v504.96h853.376V304.384zM0 128h1024v768H0V128z" fill="#ffffff" p-id="2301"></path></svg><p style="float: right; margin-right: 10px;">goodsteelworks@mail.com</p></div></a></li><li style="border:none;"><a href="javascript:goTop();" class="sidetop"><svg  class="m-svg" t="1718879693907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5218" width="200" height="200"><path d="M522.439258 279.608186 69.730643 732.316801 975.145827 732.316801Z" fill="#ffffff" p-id="5219"></path></svg></a></li></ul></div><script type="text/javascript">$(document).ready(function(){$(".side ul li").hover(function(){var index = $(this).index();console.log(index);if(index==3){$(this).find(".sidebox").stop().animate({"width":"250px"},100).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#333333"})}else{$(this).find(".sidebox").stop().animate({"width":"180px"},100).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#333333"})}},function(){$(this).find(".sidebox").stop().animate({"width":"54px"},100).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#333333"})	});});//回到顶部function goTop(){$('html,body').animate({'scrollTop':0},600);}// 获取元素const sideElement = document.querySelector('.side');// 监听滚动事件window.addEventListener('scroll', () => {// 获取当前滚动位置const scrollTop = window.scrollY || document.documentElement.scrollTop;// 判断是否滚动超过一屏if (scrollTop > window.innerHeight) {// 通过style属性显示元素sideElement.style.display = 'block';} else {// 通过style属性隐藏元素sideElement.style.display = 'none';}});</script></body></html>

打包源码客服侧边栏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/34157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于 ESP8266 和 MQ 气体传感器的微信告警系统设计与实现

接线: ESP8266MQ3vVCCGND GND A0 A0微信通知截图: 摘要:本文主要探讨了一种利用 ESP8266 微控制器与 MQ 气体传感器构建的气体检测微信告警系统。详细阐述了系统的硬件组成、软件设计以及与微信平台的交互机制。通过该系统,能够实时监测环境中的气…

VPS搭建论坛和社区网站有哪些优势?

想象一下&#xff1a;您已经建立了一个论坛。这是您的骄傲和喜悦——一个熙熙攘攘的在线多人广场&#xff0c;人们聚集在这里不仅可以聊天&#xff0c;还可以交流、分享和辩论。不过突然出现下面这些情况&#xff0c; 页面加载需要很长时间&#xff1b;光标不停旋转。会员流失…

【ai】tx2 nx: trition client安装nvidia-pyindex 一直失败

系统版本的pip和python虚拟环境的pipyolov4-triton-tensorrt的master分支 官方client jetson:pip3 install --user nvidia-pyindex 不成功啊 这个是让nvidia-pyindex 拉取nvidia@tx2-nx:~$ pip3 install --user nvidia-pyindex Collecting nvidia-pyindexDownloading https://…

STL——常用算法(二)

一、常用拷贝和替换算法 1.copy #include <iostream> #include <vector> #include <algorithm> using namespace std; void printVector(int val) {cout << val << " "; } void test01() {vector<int>v1;for (int i 0; i <…

【仿真】UR机器人相机标定、立体标定、手眼标定、视觉追踪(双目)

实现在CoppeliaSim环境中进行手眼标定和目标追踪的一个例子。它主要涉及到机器人、机器视觉和控制算法的编程&#xff0c;使用了Python语言。接下来对该代码的主要类和方法进行解析&#xff1a; 1. 导入相关库 用于与CoppeliaSim模拟器通过ZeroMQ接口通信。包含Rotation类&…

SF-YOLOv5——基于改进的特征融合模式的轻量级小目标检测算法

概述 提出了一种改进的YOLOv5模型&#xff0c;名为Small-Fast-YOLOv5 (SF-YOLOv5)&#xff0c;专门用于小目标检测。通过合理裁剪大目标检测层的特征图输出&#xff0c;显著减少了模型所需的计算资源&#xff0c;使模型变得更加轻量级。 还提出了一种改进的特征融合方法&#…

CV每日论文--2024.6.24

1、Whiteboard-of-Thought: Thinking Step-by-Step Across Modalities 中文标题&#xff1a;思维白板&#xff1a;跨模式逐步思考 简介&#xff1a;这段话描述了一种利用思维白板提示来增强大型语言模型在视觉推理任务中的性能的方法。 人类在解决需要视觉思考的问题时,通常会…

英语口语练习评测的开发实现

英语口语评测是一个复杂的系统&#xff0c;需要综合考虑语音识别、语音评测、自然语言处理等多种技术。以下是一些常见的英语口语评测开发框架。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 基于语音识别的口语评测框架这种框架主要…

第28课 绘制原理图——绘制导线

概述 放置完元器件之后&#xff0c;接着就要用导线将元器件的管脚一个一个连起来了。 绘制导线的方法 点击快速工具条上的“线”命令&#xff0c;进入绘制导线的过程。 点击选择某个管脚或电源端口&#xff0c;作为导线的起始端。 再点击选择另一个管脚或电源端口&#xff0c…

React@16.x(40)路由v5.x(5)常见应用场景(2)- 实现类似 vue 的路由模式

目录 1&#xff0c;vue-router2&#xff0c;React 模拟实现 1&#xff0c;vue-router vue 的路由配置文件&#xff0c; // src/router/index.ts const routes [{path: "/news",children: [{ path: "", component: NewsView },{ path: "detail"…

瞄准Windows的新兴僵尸网络:Kraken

2021 年 10 月&#xff0c;ZeroFox Intelligence 披露了名为 Kraken 的僵尸网络。Kraken 通过 SmokeLoader 进行传播&#xff0c;每次更新攻击基础设施时都会扩大规模。尽管与 2008 年发现的 Kraken 僵尸网络同名&#xff0c;但二者并没有其他共同点。 功能 自从 2021 年 10 …

养殖自动化通风系统:未来畜牧业的智能守护者

在现代畜牧业中&#xff0c;养殖环境的控制对于动物的健康成长和养殖业者的成功至关重要。养殖自动化通风系统凭借其先进技术和精密设备&#xff0c;实现了对养殖场内环境条件的精准调控&#xff0c;显著提升了养殖效率和动物福利。本文将深入探讨养殖自动化通风系统的必要性、…

Talking Web

1. curl 1.1 http curl http://127.0.0.1:80 向目标主机端口发送http请求 1.2 httphead curl -H “Host: 18ed3df584cd48328b5839443aa7b42b” http://127.0.0.1:80 1.3 httppath curl http://127.0.0.1:80/853c64cd218f80d0a59665666fb2ab80 1.4 URL编码路径 &#xff0…

天天大爆推文玩法营销号软件下载地址

天天大爆推文玩法营销号软件下载地址 天天大爆推文玩法营销号是一种营销策略&#xff0c;通过在社交媒体上发布频繁的推文来吸引关注和增加品牌曝光度。以下是一些可以用于天天大爆推文玩法营销号的策略&#xff1a; 营销号工具使用教程&#xff1a;https://iimenvrieak.feis…

数据结构之前缀树

写在前面 源码 。 前缀树&#xff0c;又叫做trie树&#xff0c;字典树&#xff0c;是一种多叉的树&#xff0c;一般用于单词前缀匹配的相关场景中&#xff0c;比如&#xff1a; 本文看下使用Java如何来实现这种数据结构。 1&#xff1a;基本介绍 思想&#xff1a;空间换时…

C++基础编程100题-014 OpenJudge-1.3-12 计算球的体积

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0103/12/ 描述 对于半径为r的球&#xff0c;其体积的计算公式为$ V4/3*πr^3 $&#xff0c;这里取π 3.14。 现给定r&#xff0c;求V。 输入 输入为一个不超过100的非负实数&#xff0c;即球半径&#xff0…

FL Studio 21 集成了音频剪辑和增益控制,你可以更快、更精确地控制音频电平,包括自动交叉淡入淡出及更多功能

以通过控制色调、饱和度、亮度、文本、仪表和步进序列器的颜色来改变你的DAW外观&#xff0c; DAW“情绪主题”控制&#xff0c;水果编曲将变得与众不同。 更快的音频编辑 FL Studio 21 集成了音频剪辑包络和增益控制&#xff0c;你可以更快、更精确地控制音频电平&#xff0c…

aws的alb,多个域名绑定多个网站实践

例如首次创建的alb负载均衡只有www.xxx.com 需要添加 负载 test2.xxx.com aws的Route 53产品解析到负载均衡 www.xxx.com 添加CNAME&#xff0c;到负载均衡的dns字段axx test2.xxx.com 添加CNAME&#xff0c;到负载均衡的dns字段axx 主要介绍目标组和规则 创建alb就不介…

Spring底层原理之FactoryBean Bean工厂 单例对象 多例对象

FactoryBean 在 Spring Framework 中&#xff0c;FactoryBean 是一个用于创建其他 Bean 实例的特殊工厂 Bean。它允许开发者自定义 Bean 的创建逻辑&#xff0c;从而更加灵活地管理和配置 Bean 的实例化过程。 FactoryBean 接口 FactoryBean 接口是 Spring 框架中的一个重要…

推送电子邮箱与其他营销手段如何有效结合?

推送电子邮箱的效果如何&#xff1f;怎么优化邮件推送的策略&#xff1f; 将推送电子邮箱与其他营销手段有效结合&#xff0c;可以显著提升营销效果和用户体验。AokSend将探讨如何将推送电子邮箱与社交媒体营销、内容营销、搜索引擎优化&#xff08;SEO&#xff09;等手段相结…