效果展示：
鼠标悬浮上去有浮动效果：
菜单也可以切换选中：
额外的一些功能：
页脚内容：
所有代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppMarket - 发现优质应用</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
accent: '#FF9F43',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
}
}
</style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="flex items-center">
<i class="fa fa-apple text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold text-dark">AppMarket</span>
</a>
</div>
<!-- 导航链接 - 桌面端 -->
<nav class="hidden md:flex space-x-8">
<a href="#featured" class="text-gray-700 hover:text-primary font-medium transition-colors">精选</a>
<a href="#categories" class="text-gray-700 hover:text-primary font-medium transition-colors">分类</a>
<a href="#trending" class="text-gray-700 hover:text-primary font-medium transition-colors">排行榜</a>
<a href="#new" class="text-gray-700 hover:text-primary font-medium transition-colors">新品</a>
</nav>
<!-- 搜索和用户区域 -->
<div class="flex items-center space-x-4">
<div class="relative hidden sm:block">
<input type="text" placeholder="搜索应用..." class="w-64 pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full transition-colors flex items-center">
<i class="fa fa-user-circle mr-2"></i>
<span class="hidden sm:inline">登录</span>
</button>
<!-- 移动端菜单按钮 -->
<button id="menu-toggle" class="md:hidden text-gray-700 hover:text-primary">
<i class="fa fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="md:hidden hidden bg-white border-t border-gray-100 shadow-lg">
<div class="container mx-auto px-4 py-3 space-y-3">
<div class="relative mb-4">
<input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<a href="#featured" class="block py-2 text-gray-700 hover:text-primary font-medium">精选</a>
<a href="#categories" class="block py-2 text-gray-700 hover:text-primary font-medium">分类</a>
<a href="#trending" class="block py-2 text-gray-700 hover:text-primary font-medium">排行榜</a>
<a href="#new" class="block py-2 text-gray-700 hover:text-primary font-medium">新品</a>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="flex-grow pt-16">
<!-- 英雄区 -->
<section class="relative bg-gradient-to-r from-primary/90 to-primary text-white overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/id/1/1920/1080')] bg-cover bg-center opacity-10"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
<div class="max-w-3xl">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-4">发现最好的移动应用</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8">探索、下载和体验数千款精选应用，让你的生活更高效、更有趣。</p>
<div class="flex flex-wrap gap-4">
<button class="bg-white text-primary px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors flex items-center">
<i class="fa fa-download mr-2"></i>
开始探索
</button>
<button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white/10 transition-colors flex items-center">
<i class="fa fa-play-circle mr-2"></i>
观看介绍
</button>
</div>
</div>
</div>
<!-- 波浪装饰 -->
<div class="absolute bottom-0 left-0 w-full">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" class="w-full h-auto">
<path fill="#f9fafb" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path>
</svg>
</div>
</section>
<!-- 精选应用 -->
<section id="featured" class="py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">精选应用</h2>
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
查看全部
<i class="fa fa-angle-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- 应用卡片 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/id/26/600/400" alt="生产力应用" class="w-full h-full object-cover">
<div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1 rounded">热门</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg text-gray-800">超级笔记</h3>
<p class="text-gray-500 text-sm">效率工具</p>
</div>
<div class="bg-primary/10 text-primary text-xs font-bold px-2 py-1 rounded">¥12.00</div>
</div>
<p class="text-gray-600 text-sm mb-4 line-clamp-2">一款强大的笔记应用，支持多平台同步、Markdown编辑和附件管理。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400"></i>
<span class="ml-1 text-sm font-medium">4.8</span>
<span class="text-gray-400 text-xs ml-1">(1.2k)</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
<!-- 应用卡片 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/id/160/600/400" alt="摄影应用" class="w-full h-full object-cover">
<div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">新品</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg text-gray-800">照片大师</h3>
<p class="text-gray-500 text-sm">摄影与录像</p>
</div>
<div class="bg-gray-100 text-gray-800 text-xs font-bold px-2 py-1 rounded">免费</div>
</div>
<p class="text-gray-600 text-sm mb-4 line-clamp-2">专业级照片编辑工具，拥有数百种滤镜和编辑选项。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400"></i>
<span class="ml-1 text-sm font-medium">4.7</span>
<span class="text-gray-400 text-xs ml-1">(987)</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
<!-- 应用卡片 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/id/180/600/400" alt="健康应用" class="w-full h-full object-cover">
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg text-gray-800">健康追踪</h3>
<p class="text-gray-500 text-sm">健康与健身</p>
</div>
<div class="bg-primary/10 text-primary text-xs font-bold px-2 py-1 rounded">¥18.00</div>
</div>
<p class="text-gray-600 text-sm mb-4 line-clamp-2">全面的健康追踪应用，支持心率、睡眠和运动数据监测。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400"></i>
<span class="ml-1 text-sm font-medium">4.9</span>
<span class="text-gray-400 text-xs ml-1">(2.5k)</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
<!-- 应用卡片 4 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
<div class="relative h-48">
<img src="https://picsum.photos/id/119/600/400" alt="游戏应用" class="w-full h-full object-cover">
<div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1 rounded">热门</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg text-gray-800">幻想冒险</h3>
<p class="text-gray-500 text-sm">角色扮演</p>
</div>
<div class="bg-gray-100 text-gray-800 text-xs font-bold px-2 py-1 rounded">免费</div>
</div>
<p class="text-gray-600 text-sm mb-4 line-clamp-2">一款引人入胜的角色扮演游戏，拥有精美的画面和丰富的剧情。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400"></i>
<span class="ml-1 text-sm font-medium">4.6</span>
<span class="text-gray-400 text-xs ml-1">(3.7k)</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 应用分类 -->
<section id="categories" class="py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-10">应用分类</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<!-- 分类卡片 1 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-gamepad text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">游戏</h3>
<p class="text-gray-500 text-xs mt-1">1,254 款应用</p>
</a>
<!-- 分类卡片 2 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-heartbeat text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">健康</h3>
<p class="text-gray-500 text-xs mt-1">876 款应用</p>
</a>
<!-- 分类卡片 3 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-music text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">音乐</h3>
<p class="text-gray-500 text-xs mt-1">943 款应用</p>
</a>
<!-- 分类卡片 4 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-cutlery text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">美食</h3>
<p class="text-gray-500 text-xs mt-1">652 款应用</p>
</a>
<!-- 分类卡片 5 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-camera text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">摄影</h3>
<p class="text-gray-500 text-xs mt-1">789 款应用</p>
</a>
<!-- 分类卡片 6 -->
<a href="#" class="bg-gray-50 hover:bg-gray-100 rounded-xl p-5 text-center transition-colors">
<div class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fa fa-briefcase text-xl"></i>
</div>
<h3 class="font-medium text-gray-800">商务</h3>
<p class="text-gray-500 text-xs mt-1">1,123 款应用</p>
</a>
</div>
</div>
</section>
<!-- 排行榜 -->
<section id="trending" class="py-16 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">热门排行榜</h2>
<div class="flex space-x-2">
<button class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">免费</button>
<button class="bg-white text-gray-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100">付费</button>
<button class="bg-white text-gray-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100">畅销</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应用</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">评分</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">下载量</th>
<th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- 排行 1 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center font-bold">1</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://picsum.photos/id/1/60/60" alt="超级游戏" class="w-10 h-10 rounded-lg mr-3">
<div>
<div class="font-medium text-gray-900">超级游戏</div>
<div class="text-gray-500 text-sm">游戏工作室</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">动作冒险</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.9</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10M+</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</td>
</tr>
<!-- 排行 2 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center font-bold">2</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://picsum.photos/id/20/60/60" alt="社交聊天" class="w-10 h-10 rounded-lg mr-3">
<div>
<div class="font-medium text-gray-900">社交聊天</div>
<div class="text-gray-500 text-sm">社交网络</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">社交</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.8</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50M+</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</td>
</tr>
<!-- 排行 3 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center font-bold">3</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://picsum.photos/id/96/60/60" alt="视频播放器" class="w-10 h-10 rounded-lg mr-3">
<div>
<div class="font-medium text-gray-900">视频播放器</div>
<div class="text-gray-500 text-sm">媒体公司</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">视频</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.7</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25M+</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</td>
</tr>
<!-- 排行 4 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center font-bold">4</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://picsum.photos/id/60/60/60" alt="生活助手" class="w-10 h-10 rounded-lg mr-3">
<div>
<div class="font-medium text-gray-900">生活助手</div>
<div class="text-gray-500 text-sm">生活科技</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">生活</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.6</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18M+</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</td>
</tr>
<!-- 排行 5 -->
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center font-bold">5</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://picsum.photos/id/62/60/60" alt="音乐播放器" class="w-10 h-10 rounded-lg mr-3">
<div>
<div class="font-medium text-gray-900">音乐播放器</div>
<div class="text-gray-500 text-sm">音乐科技</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">音乐</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.8</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30M+</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center justify-center">
查看完整排行榜
<i class="fa fa-angle-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 新品推荐 -->
<section id="new" class="py-16 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center mb-10">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">新品推荐</h2>
<a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center">
查看更多
<i class="fa fa-angle-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 新品卡片 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 card-hover">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex">
<img src="https://picsum.photos/id/237/80/80" alt="旅行助手" class="w-16 h-16 rounded-lg mr-4">
<div>
<h3 class="font-semibold text-lg text-gray-800">旅行助手</h3>
<p class="text-gray-500 text-sm">旅行与导航</p>
<div class="flex items-center mt-1">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.7</span>
<span class="text-gray-400 text-xs ml-1">(254)</span>
</div>
</div>
</div>
<div class="bg-secondary text-white text-xs font-bold px-2 py-1 rounded">新品</div>
</div>
<p class="text-gray-600 text-sm mb-4">一款功能强大的旅行应用，帮助你规划行程、查找景点和预订酒店。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-800">¥25.00</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
<!-- 新品卡片 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 card-hover">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex">
<img src="https://picsum.photos/id/42/80/80" alt="美食菜谱" class="w-16 h-16 rounded-lg mr-4">
<div>
<h3 class="font-semibold text-lg text-gray-800">美食菜谱</h3>
<p class="text-gray-500 text-sm">美食与烹饪</p>
<div class="flex items-center mt-1">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.8</span>
<span class="text-gray-400 text-xs ml-1">(189)</span>
</div>
</div>
</div>
<div class="bg-secondary text-white text-xs font-bold px-2 py-1 rounded">新品</div>
</div>
<p class="text-gray-600 text-sm mb-4">收录超过10,000道全球美食菜谱，包含详细步骤和视频教程。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-800">免费</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
<!-- 新品卡片 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 card-hover">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex">
<img src="https://picsum.photos/id/36/80/80" alt="智能家居" class="w-16 h-16 rounded-lg mr-4">
<div>
<h3 class="font-semibold text-lg text-gray-800">智能家居</h3>
<p class="text-gray-500 text-sm">工具与效率</p>
<div class="flex items-center mt-1">
<i class="fa fa-star text-yellow-400 text-sm"></i>
<span class="ml-1 text-sm font-medium">4.9</span>
<span class="text-gray-400 text-xs ml-1">(321)</span>
</div>
</div>
</div>
<div class="bg-secondary text-white text-xs font-bold px-2 py-1 rounded">新品</div>
</div>
<p class="text-gray-600 text-sm mb-4">一款智能家居控制中心，支持多种品牌设备，一键管理家庭所有智能设备。</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-800">¥38.00</span>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-full text-sm transition-colors">
下载
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 订阅区域 -->
<section class="py-16 bg-primary relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://picsum.photos/id/10/1920/1080')] bg-cover bg-center opacity-10"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-4">获取最新应用资讯</h2>
<p class="text-white/80 text-lg mb-8">订阅我们的通讯，第一时间获取应用更新、优惠活动和独家内容。</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" placeholder="输入你的邮箱地址" class="flex-grow px-4 py-3 rounded-full focus:outline-none focus:ring-2 focus:ring-white/30">
<button type="submit" class="bg-white text-primary px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors whitespace-nowrap">
立即订阅
</button>
</form>
<p class="text-white/60 text-sm mt-4">我们尊重你的隐私，绝不会分享你的个人信息。</p>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- 公司信息 -->
<div>
<div class="flex items-center mb-4">
<i class="fa fa-apple text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold">AppMarket</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-colors">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors">
<i class="fa fa-linkedin"></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-colors">首页</a></li>
<li><a href="#featured" class="text-gray-400 hover:text-white transition-colors">精选应用</a></li>
<li><a href="#categories" class="text-gray-400 hover:text-white transition-colors">应用分类</a></li>
<li><a href="#trending" class="text-gray-400 hover:text-white transition-colors">热门排行榜</a></li>
<li><a href="#new" class="text-gray-400 hover:text-white transition-colors">新品推荐</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-colors">帮助中心</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">开发者支持</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
</ul>
</div>
<!-- 下载应用 -->
<div>
<h3 class="text-lg font-semibold mb-4">下载应用</h3>
<p class="text-gray-400 mb-4">随时随地浏览和下载应用，获取更好的体验。</p>
<div class="space-y-3">
<a href="#" class="flex items-center bg-gray-800 hover:bg-gray-700 transition-colors p-3 rounded-lg">
<i class="fa fa-apple text-2xl mr-3"></i>
<div>
<div class="text-xs">下载</div>
<div class="font-medium">App Store</div>
</div>
</a>
<a href="#" class="flex items-center bg-gray-800 hover:bg-gray-700 transition-colors p-3 rounded-lg">
<i class="fa fa-android text-2xl mr-3"></i>
<div>
<div class="text-xs">下载</div>
<div class="font-medium">Google Play</div>
</div>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm">© 2025 AppMarket. 保留所有权利。</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">使用条款</a>
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">隐私政策</a>
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm">Cookie 设置</a>
</div>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('bg-white', 'shadow-md');
navbar.classList.remove('bg-white/90');
} else {
navbar.classList.remove('bg-white', 'shadow-md');
navbar.classList.add('bg-white/90');
}
});
// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 平滑滚动
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'
});
// 关闭移动菜单
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// 应用卡片悬停效果
const cards = document.querySelectorAll('.card-hover');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.add('shadow-lg');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('shadow-lg');
});
});
</script>
</body>
</html>
