<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式网页设计</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义CSS */
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.mobile-menu.open {
max-height: 500px;
}
@media (min-width: 1024px) {
.lg\:w-30 {
width: 30%;
}
}
/* 中文排版优化 */
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.chinese-text {
letter-spacing: 0.5px;
line-height: 1.7;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800 chinese-text">
<!-- 导航栏 -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<div>
<a href="#" class="flex items-center py-2 px-2">
<i class="fas fa-rocket text-purple-600 text-2xl mr-2"></i>
<span class="font-semibold text-gray-900 text-lg">科技解决方案</span>
</a>
</div>
</div>
<!-- 主导航 -->
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-3 text-purple-600 border-b-2 border-purple-600 font-medium">首页</a>
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">服务</a>
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">关于我们</a>
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">联系我们</a>
<a href="#" class="py-2 px-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-300">免费咨询</a>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="outline-none">
<i class="fas fa-bars text-gray-500 text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="mobile-menu md:hidden bg-white">
<div class="px-2 pt-2 pb-4 space-y-1">
<a href="#" class="block px-3 py-2 text-base font-medium text-purple-600 bg-purple-50 rounded">首页</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">服务</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">关于我们</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">联系我们</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-white bg-purple-600 rounded hover:bg-purple-700">免费咨询</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="hero-gradient text-white">
<div class="max-w-6xl mx-auto px-4 py-20 md:py-32">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">创新科技解决方案助力企业发展</h1>
<p class="text-xl md:text-2xl mb-8 opacity-90">我们通过前沿技术和创新策略，帮助企业实现数字化转型和业务增长。</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">立即咨询</button>
<button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">了解更多</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
alt="商务会议"
class="rounded-lg shadow-2xl w-full max-w-md">
</div>
</div>
</div>
</section>
<!-- 服务特色 -->
<section class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">我们提供全方位的数字化解决方案，助力企业在数字时代蓬勃发展。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 服务1 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-laptop-code text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">网站开发</h3>
<p class="text-gray-600 mb-4">采用最新技术，为企业量身定制网站和Web应用程序，满足您的业务需求。</p>
<a href="#" class="text-purple-600 font-semibold flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- 服务2 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-mobile-alt text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">移动应用</h3>
<p class="text-gray-600 mb-4">为iOS和Android平台开发美观实用的移动应用程序，提升客户参与度。</p>
<a href="#" class="text-purple-600 font-semibold flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- 服务3 -->
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-chart-line text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">数字营销</h3>
<p class="text-gray-600 mb-4">基于数据的营销策略，提升您的在线可见度和客户获取能力。</p>
<a href="#" class="text-purple-600 font-semibold flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 客户评价 -->
<section class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">客户评价</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 评价1 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="张女士" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">张女士</h4>
<p class="text-gray-600 text-sm">创新科技 CEO</p>
</div>
</div>
<p class="text-gray-700 italic">"科技解决方案彻底改变了我们的线上形象。自合作以来，我们的网站流量增长了300%。"</p>
<div class="mt-4 text-purple-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- 评价2 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="王先生" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">王先生</h4>
<p class="text-gray-600 text-sm">零售通 创始人</p>
</div>
</div>
<p class="text-gray-700 italic">"他们为我们开发的移动应用彻底改变了客户互动方式。强烈推荐他们的服务！"</p>
<div class="mt-4 text-purple-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- 评价3 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="李女士" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">李女士</h4>
<p class="text-gray-600 text-sm">时尚购 市场总监</p>
</div>
</div>
<p class="text-gray-700 italic">"他们的数字营销团队取得了卓越成果。我们的投资回报率从未如此好过。真正值得信赖的合作伙伴。"</p>
<div class="mt-4 text-purple-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- 行动号召 -->
<section class="py-20 bg-purple-600 text-white">
<div class="max-w-6xl mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好改变您的业务了吗？</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">让我们探讨如何通过创新解决方案帮助您实现目标。</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">免费咨询</button>
<button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">联系我们</button>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<!-- 公司信息 -->
<div>
<div class="flex items-center mb-4">
<i class="fas fa-rocket text-purple-500 text-2xl mr-2"></i>
<span class="font-semibold text-xl">科技解决方案</span>
</div>
<p class="text-gray-400 mb-4">创新科技解决方案，助力企业在数字世界中成长和成功。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-tiktok"></i>
</a>
</div>
</div>
<!-- 快速链接 -->
<div>
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">首页</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">服务</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">关于我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">成功案例</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">联系我们</a></li>
</ul>
</div>
<!-- 服务 -->
<div>
<h3 class="text-lg font-semibold mb-4">服务项目</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">网站开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">移动应用开发</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX设计</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">数字营销</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">SEO优化</a></li>
</ul>
</div>
<!-- 联系我们 -->
<div>
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-purple-500 mt-1 mr-3"></i>
<span class="text-gray-400">中国北京市海淀区科技园路88号</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-purple-500 mr-3"></i>
<span class="text-gray-400">400-888-8888</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-purple-500 mr-3"></i>
<span class="text-gray-400">info@techsolutions.cn</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 科技解决方案 版权所有</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">隐私政策</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">服务条款</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">网站地图</a>
</div>
</div>
</div>
</footer>
<script>
// 移动端菜单切换
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('open');
});
// 锚点平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// 如果移动菜单打开则关闭
mobileMenu.classList.remove('open');
}
});
});
// 滚动时给导航栏添加阴影
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 10) {
nav.classList.add('shadow-lg');
} else {
nav.classList.remove('shadow-lg');
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shengzi/myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>