期盼网络·专业的网络技术服务提供商 <style> /* 全局样式重置与基础设置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } body { background-color: #000; color: #fff; overflow-x: hidden; line-height: 1.6; } /* 黑金渐变背景 */ .gradient-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(-45deg, #000000, #1a1a1a, #2d2d2d, #000000); background-size: 400% 400%; animation: gradient 15s ease infinite; opacity: 0.95; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 金色几何装饰 */ .decor-shape { position: absolute; border-radius: 50%; background: rgba(218, 165, 32, 0.05); border: 1px solid rgba(218, 165, 32, 0.1); box-shadow: 0 0 40px rgba(218, 165, 32, 0.08); z-index: -1; } .shape1 { top: 10%; right: 5%; width: 300px; height: 300px; animation: float 8s ease-in-out infinite; } .shape2 { bottom: 10%; left: 5%; width: 250px; height: 250px; animation: float 10s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } /* 导航栏样式 */ header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(218, 165, 32, 0.2); z-index: 999; } .logo { display: flex; align-items: center; } .logo img { height: 50px; width: auto; filter: drop-shadow(0 2px 8px rgba(218, 165, 32, 0.4)); } .logo-text { font-size: 24px; font-weight: 700; margin-left: 15px; background: linear-gradient(45deg, #D4AF37, #FFD700, #F0E68C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } .nav-links { display: flex; gap: 30px; } .nav-links a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.3s ease; position: relative; } .nav-links a:hover { color: #FFD700; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(45deg, #D4AF37, #FFD700); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } /* 移动端导航按钮 */ .mobile-nav-btn { display: none; font-size: 24px; color: #FFD700; cursor: pointer; } /* 英雄区样式 */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 5%; text-align: center; position: relative; padding-top: 80px; } .hero-title { font-size: 48px; font-weight: 800; margin-bottom: 20px; background: linear-gradient(45deg, #fff, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(255, 215, 0, 0.3); letter-spacing: 2px; } .hero-subtitle { font-size: 20px; color: #ccc; max-width: 800px; margin-bottom: 40px; line-height: 1.8; } .hero-btn { padding: 15px 40px; background: linear-gradient(45deg, #D4AF37, #FFD700); color: #000; border: none; border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(218, 165, 32, 0.3); } .hero-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(218, 165, 32, 0.5); } /* 通用板块样式 */ .section { padding: 100px 5%; position: relative; } .section-title { text-align: center; font-size: 36px; font-weight: 700; margin-bottom: 60px; background: linear-gradient(45deg, #D4AF37, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .section-title::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(45deg, #D4AF37, #FFD700); border-radius: 3px; } /* 公司简介样式 */ .about-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-image { border-radius: 20px; overflow: hidden; box-shadow: 0 15px 30px rgba(218, 165, 32, 0.2); border: 1px solid rgba(218, 165, 32, 0.3); } .about-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .about-image:hover img { transform: scale(1.05); } .about-content h3 { font-size: 28px; color: #FFD700; margin-bottom: 20px; } .about-content p { color: #ddd; font-size: 16px; line-height: 1.8; margin-bottom: 20px; } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .stat-item { text-align: center; padding: 20px; background: rgba(0, 0, 0, 0.5); border-radius: 10px; border: 1px solid rgba(218, 165, 32, 0.2); } .stat-number { font-size: 36px; font-weight: 700; color: #FFD700; margin-bottom: 10px; } .stat-label { color: #ccc; font-size: 14px; } /* 核心业务样式 */ .services-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { background: rgba(0, 0, 0, 0.6); border-radius: 15px; padding: 40px 20px; text-align: center; border: 1px solid rgba(218, 165, 32, 0.2); transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .service-card:hover { transform: translateY(-10px); border-color: rgba(218, 165, 32, 0.5); box-shadow: 0 15px 30px rgba(218, 165, 32, 0.2); } .service-icon { font-size: 48px; color: #FFD700; margin-bottom: 20px; } .service-title { font-size: 22px; color: #FFD700; margin-bottom: 15px; font-weight: 600; } .service-desc { color: #ccc; font-size: 14px; line-height: 1.7; } /* 团队优势样式 */ .team-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .team-member { background: rgba(0, 0, 0, 0.6); border-radius: 15px; overflow: hidden; border: 1px solid rgba(218, 165, 32, 0.2); transition: all 0.3s ease; } .team-member:hover { transform: translateY(-10px); border-color: rgba(218, 165, 32, 0.5); } .member-img { width: 100%; height: 250px; overflow: hidden; } .member-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .team-member:hover .member-img img { transform: scale(1.1); } .member-info { padding: 20px; text-align: center; } .member-name { font-size: 18px; color: #FFD700; font-weight: 600; margin-bottom: 5px; } .member-position { color: #ccc; font-size: 14px; margin-bottom: 15px; } .member-desc { color: #999; font-size: 13px; line-height: 1.6; } /* 联系我们样式 */ .contact-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-info { background: rgba(0, 0, 0, 0.6); border-radius: 15px; padding: 40px; border: 1px solid rgba(218, 165, 32, 0.2); } .contact-info h3 { font-size: 28px; color: #FFD700; margin-bottom: 30px; font-weight: 600; } .contact-item { display: flex; align-items: center; margin-bottom: 25px; } .contact-icon { font-size: 24px; color: #FFD700; margin-right: 20px; width: 40px; text-align: center; } .contact-text h4 { color: #fff; font-size: 16px; margin-bottom: 5px; } .contact-text p { color: #ccc; font-size: 14px; } .contact-form { background: rgba(0, 0, 0, 0.6); border-radius: 15px; padding: 40px; border: 1px solid rgba(218, 165, 32, 0.2); } .contact-form h3 { font-size: 28px; color: #FFD700; margin-bottom: 30px; font-weight: 600; } .form-group { margin-bottom: 20px; } .form-group label { display: block; color: #ccc; font-size: 14px; margin-bottom: 8px; } .form-group input, .form-group textarea { width: 100%; padding: 15px; background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(218, 165, 32, 0.3); border-radius: 8px; color: #fff; font-size: 16px; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #FFD700; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1); } .form-group textarea { height: 150px; resize: none; } .submit-btn { width: 100%; padding: 15px; background: linear-gradient(45deg, #D4AF37, #FFD700); color: #000; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(218, 165, 32, 0.2); } .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4); } /* 页脚样式 - 新增友情链接后优化 */ footer { background: rgba(0, 0, 0, 0.9); padding: 60px 5% 30px; border-top: 1px solid rgba(218, 165, 32, 0.2); } .footer-top { max-width: 1200px; margin: 0 auto; display: grid; /* 新增友情链接列，改为5列布局 */ grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-logo { display: flex; align-items: center; margin-bottom: 20px; } .footer-logo img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(218, 165, 32, 0.4)); margin-right: 15px; } .footer-logo-text { font-size: 20px; font-weight: 700; background: linear-gradient(45deg, #D4AF37, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .footer-desc { color: #999; font-size: 14px; line-height: 1.8; margin-bottom: 20px; } .footer-social { display: flex; gap: 15px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(218, 165, 32, 0.1); display: flex; justify-content: center; align-items: center; color: #FFD700; font-size: 18px; transition: all 0.3s ease; } .social-icon:hover { background: #FFD700; color: #000; transform: translateY(-3px); } .footer-title { font-size: 18px; color: #FFD700; font-weight: 600; margin-bottom: 20px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #999; text-decoration: none; font-size: 14px; transition: all 0.3s ease; display: inline-block; } .footer-links a:hover { color: #FFD700; padding-left: 5px; } /* 友情链接特殊样式（可选） */ .friend-link a { display: flex; align-items: center; gap: 8px; } .friend-link a::before { content: "🔗"; font-size: 12px; } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(218, 165, 32, 0.1); text-align: center; color: #999; font-size: 14px; /* 新增备案信息样式 */ display: flex; flex-direction: column; gap: 8px; } .footer-beian { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 10px; } .footer-beian a { color: #999; text-decoration: none; font-size: 12px; } .footer-beian a:hover { color: #FFD700; } /* 回到顶部按钮 */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(45deg, #D4AF37, #FFD700); color: #000; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; box-shadow: 0 5px 15px rgba(218, 165, 32, 0.3); transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: 998; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(218, 165, 32, 0.5); } /* 响应式样式 - 适配新增的友情链接列 */ @media (max-width: 1024px) { .about-container { grid-template-columns: 1fr; gap: 40px; } .services-container { grid-template-columns: repeat(2, 1fr); } .team-container { grid-template-columns: repeat(2, 1fr); } .footer-top { /* 平板端合并列，保持布局美观 */ grid-template-columns: 2fr 1fr 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .mobile-nav-btn { display: block; } .hero-title { font-size: 36px; } .hero-subtitle { font-size: 18px; } .section-title { font-size: 28px; } .services-container { grid-template-columns: 1fr; } .contact-container { grid-template-columns: 1fr; gap: 30px; } .footer-top { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 480px) { .hero-title { font-size: 28px; } .hero-subtitle { font-size: 16px; } .about-stats { grid-template-columns: 1fr; } .team-container { grid-template-columns: 1fr; } .contact-info, .contact-form { padding: 20px; } .footer-beian { flex-direction: column; gap: 5px; } } </style>  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body>  <div class="gradient-bg"></div>  <div class="decor-shape shape1"></div> <div class="decor-shape shape2"></div>  <header> <div class="logo"> <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/2f5b41f0b76f4db3afacdb57613ff2fb.png~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123074704399730F001E838036B2A&rrcfp=dafada99&x-expires=2085349624&x-signature=S0Zz1DigOWCqzM%2FgpfCOCZctFew%3D" alt="期盼网络logo"> <div class="logo-text">期盼网络</div> </div> <nav class="nav-links"> <a href="#home">首页</a> <a href="#about">关于我们</a> <a href="#services">核心业务</a> <a href="#team">团队优势</a> <a href="#contact">联系我们</a> </nav> <div class="mobile-nav-btn"> <i class="fas fa-bars"></i> </div> </header>  <section class="hero" id="home"> <h1 class="hero-title">期盼网络 - 守护您的网络安全</h1> <p class="hero-subtitle"> 期盼网络是一家专注于网络安全解决方案、系统开发与技术服务的高科技企业。我们凭借专业的技术团队、丰富的行业经验和创新的服务理念，为企业提供全方位的网络安全保障和数字化转型支持，致力于成为您可信赖的技术合作伙伴。 </p> <button class="hero-btn" onclick="scrollToSection('about')">了解更多</button> </section>  <section class="section" id="about"> <h2 class="section-title">关于我们</h2> <div class="about-container"> <div class="about-image"> <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/2f5b41f0b76f4db3afacdb57613ff2fb.png~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123074704399730F001E838036B2A&rrcfp=dafada99&x-expires=2085349624&x-signature=S0Zz1DigOWCqzM%2FgpfCOCZctFew%3D" alt="期盼网络"> </div> <div class="about-content"> <h3>引领网络安全，赋能数字未来</h3> <p> 期盼网络成立于2025年，是国内领先的网络安全与信息技术服务提供商 </p> <p> 自成立以来，我们始终秉承"安全为本、技术创新、客户至上"的核心价值观，专注于网络安全防护、数据安全治理、企业级系统开发、云计算与大数据应用等领域，为金融、政府、能源、医疗、教育等多个行业的客户提供定制化解决方案 </p> <p> 。 </p> <div class="about-stats"> <div class="stat-item"> <div class="stat-number">100+</div> <div class="stat-label">专业技术人员</div> </div> <div class="stat-item"> <div class="stat-number">500+</div> <div class="stat-label">成功案例</div> </div> <div class="stat-item"> <div class="stat-number">98%</div> <div class="stat-label">客户满意度</div> </div> </div> </div> </div> </section>  <section class="section" id="services"> <h2 class="section-title">核心业务</h2> <div class="services-container"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-shield-halved"></i> </div> <h3 class="service-title">网络安全防护</h3> <p class="service-desc"> 提供全方位的网络安全防护解决方案，包括防火墙部署、入侵检测与防御、漏洞扫描与修复、安全审计等，全面保障企业网络系统的安全稳定运行。 </p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-database"></i> </div> <h3 class="service-title">数据安全治理</h3> <p class="service-desc"> 针对企业数据资产提供全生命周期的安全管理，包括数据加密、脱敏、备份恢复、访问控制等，确保数据安全合规，防范数据泄露风险。 </p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-code"></i> </div> <h3 class="service-title">定制化系统开发</h3> <p class="service-desc"> 根据企业实际需求，定制开发各类管理系统、业务系统和移动应用，采用先进的技术架构，确保系统的安全性、稳定性和可扩展性。 </p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-cloud"></i> </div> <h3 class="service-title">云计算服务</h3> <p class="service-desc"> 提供云平台搭建、云迁移、云安全、混合云管理等一站式云计算服务，帮助企业降低IT成本，提升资源利用效率和业务响应速度。 </p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-chart-line"></i> </div> <h3 class="service-title">大数据分析</h3> <p class="service-desc"> 基于大数据技术为企业提供数据采集、存储、分析和可视化服务，挖掘数据价值，为企业决策提供科学依据，助力业务增长。 </p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-user-shield"></i> </div> <h3 class="service-title">安全咨询与培训</h3> <p class="service-desc"> 提供专业的网络安全咨询、风险评估、合规审计服务，以及定制化的安全培训课程，提升企业整体安全意识和防护能力。 </p> </div> </div> </section>  <section class="section" id="team"> <h2 class="section-title">团队优势</h2> <div class="team-container"> <div class="team-member"> <div class="member-img">  <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/5d87e6c09604478fa6b9dc2ff018affe.jpg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123075215DFFA4E87DC3C6302C7AF&rrcfp=dafada99&x-expires=2085349935&x-signature=iN8%2BWloTE2nw5RFGqszUl6zIkd8%3D" alt="团队成员"> </div> <div class="member-info"> <h4 class="member-name">期盼</h4> <div class="member-position">创始人 / CEO</div> <p class="member-desc"> 期盼网络创始人 CEO 鼓励人人都使用期盼网络系列产品 </p> </div> </div> <div class="team-member"> <div class="member-img">  <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/907b26f3adb74274999b18f95d86f7d0.jpg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123075215DFFA4E87DC3C6302C7AF&rrcfp=dafada99&x-expires=2085349935&x-signature=lqE9pPfml25APMT8FhdFioe27bg%3D" alt="团队成员"> </div> <div class="member-info"> <h4 class="member-name">钠云</h4> <div class="member-position">优质idc服务提供商</div> <p class="member-desc"> 提供优质稳定平价的云服务器以及云计算产品 </p> </div> </div> <div class="team-member"> <div class="member-img">  <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/7f7270c90a9d4e2a84e87ef5ae32c8a6.jpg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123075215DFFA4E87DC3C6302C7AF&rrcfp=dafada99&x-expires=2085349935&x-signature=IiRWry5pvWocwbsk1c8GZhS0XYE%3D" alt="图片2"> </div> <div class="member-info"> <h4 class="member-name">爱绝</h4> <div class="member-position">技术支持</div> <p class="member-desc"> 为期盼网络提供有效及时的技术支持 </p> </div> </div> <div class="team-member"> <div class="member-img">  <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/9a5c0524f5d745848b9a90c7dcd0dbae.jpg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123075215DFFA4E87DC3C6302C7AF&rrcfp=dafada99&x-expires=2085349935&x-signature=KzbIhAqoo9KTmrEo9%2FUMNBWJ7BU%3D" alt="团队成员"> </div> <div class="member-info"> <h4 class="member-name">曾经</h4> <div class="member-position">合作方 / 二级idc提供商</div> <p class="member-desc"> 曾经（云灵网络）深化产品品质为期盼网络提供技术支持和idc二级服务 </p> </div> </div> </div> </section>  <section class="section" id="contact"> <h2 class="section-title">联系我们</h2> <div class="contact-container"> <div class="contact-info"> <h3>联系方式</h3> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-text"> <h4>公司地址</h4> <p>山东省烟台市牟平区</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-text"> <h4>联系电话</h4> <p>18143089128</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-text"> <h4>电子邮箱</h4> <p>xingjing0622@qq.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-text"> <h4>工作时间</h4> <p>周一至周五 9:00-18:00（节假日除外）</p> </div> </div> </div> <div class="contact-form"> <h3>留言咨询</h3> <form id="contactForm"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" placeholder="请输入您的姓名" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="tel" id="phone" name="phone" placeholder="请输入您的联系电话" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="请输入您的电子邮箱" required> </div> <div class="form-group"> <label for="message">留言内容</label> <textarea id="message" name="message" placeholder="请输入您想咨询的内容" required></textarea> </div> <button type="submit" class="submit-btn">提交留言</button> </form> </div> </div> </section>  <footer> <div class="footer-top"> <div class="footer-col"> <div class="footer-logo"> <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/2f5b41f0b76f4db3afacdb57613ff2fb.png~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260123074704399730F001E838036B2A&rrcfp=dafada99&x-expires=2085349624&x-signature=S0Zz1DigOWCqzM%2FgpfCOCZctFew%3D" alt="期盼网络logo"> <div class="footer-logo-text">期盼网络</div> </div> <p class="footer-desc"> 期盼网络致力于为企业提供专业的网络安全解决方案和信息技术服务，以技术创新驱动企业数字化转型，守护企业网络安全。 </p> <div class="footer-social"> <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a> <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a> <a href="#" class="social-icon"><i class="fab fa-qq"></i></a> <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a> </div> </div> <div class="footer-col"> <h4 class="footer-title">快速链接</h4> <ul class="footer-links"> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">核心业务</a></li> <li><a href="#team">团队优势</a></li> <li><a href="#contact">联系我们</a></li> </ul> </div> <div class="footer-col"> <h4 class="footer-title">业务范围</h4> <ul class="footer-links"> <li><a href="#">网络安全防护</a></li> <li><a href="#">数据安全治理</a></li> <li><a href="#">系统定制开发</a></li> <li><a href="#">云计算服务</a></li> <li><a href="#">安全咨询培训</a></li> </ul> </div> <div class="footer-col"> <h4 class="footer-title">法律信息</h4> <ul class="footer-links"> <li><a href="#">隐私政策</a></li> <li><a href="#">服务条款</a></li> <li><a href="#">法律声明</a></li> <li><a href="#">知识产权</a></li> </ul> </div>  <div class="footer-col friend-link"> <h4 class="footer-title">友情链接</h4> <ul class="footer-links"> <li><a href="https://www.stcxwl.com/" target="_blank">辰溪网络</a></li> <li><a href="https://www.naidc.cn/" target="_blank">钠云计算</a></li> <li><a href="https://www.dysxt.cn/" target="_blank">鲸芷集团</a></li> <li><a href="1" target="_blank">此处友情链接为空</a></li> <li><a href="1" target="_blank">此处友情链接为空</a></li> <li><a href="1" target="_blank">此处友情链接为空</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2026 期盼网络科技版权所有 </p>  <div class="footer-beian"> <a href="https://beian.miit.gov.cn/" target="_blank"></a> <a href="#" target="_blank"></a> </div> </div> </footer>  <div class="back-to-top" id="backToTop"> <i class="fas fa-arrow-up"></i> </div> <script> // 平滑滚动 function scrollToSection(id) { const section = document.getElementById(id); section.scrollIntoView({ behavior: 'smooth' }); } // 回到顶部按钮 const backToTopBtn = document.getElementById('backToTop'); window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { backToTopBtn.classList.add('show'); } else { backToTopBtn.classList.remove('show'); } }); backToTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // 导航栏滚动效果 window.addEventListener('scroll', function() { const header = document.querySelector('header'); if (window.pageYOffset > 50) { header.style.padding = '15px 5%'; header.style.background = 'rgba(0, 0, 0, 0.9)'; } else { header.style.padding = '20px 5%'; header.style.background = 'rgba(0, 0, 0, 0.8)'; } }); // 表单提交处理 document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // 获取表单数据 const formData = { name: document.getElementById('name').value, phone: document.getElementById('phone').value, email: document.getElementById('email').value, message: document.getElementById('message').value }; // 模拟表单提交 alert(`感谢您的留言，${formData.name}！我们会尽快与您联系。`); this.reset(); }); // 移动端导航（简单实现） const mobileNavBtn = document.querySelector('.mobile-nav-btn'); const navLinks = document.querySelector('.nav-links'); mobileNavBtn.addEventListener('click', function() { if (navLinks.style.display === 'flex') { navLinks.style.display = 'none'; } else { navLinks.style.display = 'flex'; navLinks.style.flexDirection = 'column'; navLinks.style.position = 'absolute'; navLinks.style.top = '80px'; navLinks.style.right = '5%'; navLinks.style.background = 'rgba(0, 0, 0, 0.95)'; navLinks.style.padding = '20px'; navLinks.style.borderRadius = '10px'; navLinks.style.border = '1px solid rgba(218, 165, 32, 0.2)'; navLinks.style.gap = '15px'; } }); // 新增：页脚友情链接点击统计（可选功能） document.querySelectorAll('.friend-link a').forEach(link => { link.addEventListener('click', function() { const linkName = this.textContent.trim(); console.log(`点击友情链接：${linkName}，链接地址：${this.href}`); // 可在此处添加埋点、统计等逻辑 }); }); </script> </body> </html>