<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">App名称 下载中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #007AFF;
            --secondary: #34C759;
            --dark: #1C1C1E;
            --light: #F2F2F7;
            --gray: #8E8E93;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* Header */
        header {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: var(--primary);
        }
        .logo i {
            margin-right: 10px;
            font-size: 30px;
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            margin-left: 30px;
        }
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
        }
        .nav-links a:hover {
            color: var(--primary);
        }
        /* Hero Section */
        .hero {
            padding: 80px 0;
            text-align: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .app-preview {
            max-width: 400px;
            margin: 0 auto 40px;
            position: relative;
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .app-preview img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        .hero h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--dark);
        }
        .hero p {
            font-size: 1.2rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto 40px;
        }
        .download-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .download-btn {
            display: flex;
            align-items: center;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .download-btn i {
            font-size: 24px;
            margin-right: 10px;
        }
        .btn-appstore {
            background: black;
            color: white;
        }
        .btn-appstore:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        .btn-googleplay {
            background: #DB4437;
            color: white;
        }
        .btn-googleplay:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(219, 68, 55, 0.3);
        }
        /* Features Section */
        .features {
            padding: 80px 0;
            background: white;
        }
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--dark);
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .feature-card {
            text-align: center;
            padding: 30px;
            border-radius: 15px;
            transition: transform 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        .feature-icon {
            font-size: 50px;
            color: var(--primary);
            margin-bottom: 20px;
        }
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        .feature-card p {
            color: var(--gray);
        }
        /* Screenshots Section */
        .screenshots {
            padding: 80px 0;
            background: var(--light);
        }
        .screenshot-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 20px;
            padding: 20px 0;
            scrollbar-width: none;
        }
        .screenshot-slider::-webkit-scrollbar {
            display: none;
        }
        .screenshot-item {
            flex: 0 0 300px;
            scroll-snap-align: start;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .screenshot-item img {
            width: 100%;
            height: auto;
            display: block;
        }
        /* Footer */
        footer {
            background: var(--dark);
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 20px;
        }
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }
        .footer-links a:hover {
            opacity: 0.7;
        }
        .copyright {
            color: var(--gray);
        }
        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            .nav-links {
                display: none;
            }
            .download-buttons {
                flex-direction: column;
                align-items: center;
            }
            .download-btn {
                width: 80%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-Header -->
    <header>
        <div class="container">
            <nav>
                <div class="logo">
                    <i class="fas fa-rocket"></i>
                    <span>App名称</span>
                </div>
                <ul class="nav-links">
                    <li><a href="#features">功能特色</a></li>
                    <li><a href="#screenshots">截图展示</a></li>
                    <li><a href="#download">立即下载</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="app-preview">
                <img src="https://via.placeholder.com/400/800" alt="App预览图">
            </div>
            <h1>革命性的移动应用体验</h1>
            <p>下载我们的应用，开启全新数字生活，简洁设计，强大功能，随时随地满足您的需求。</p>
            <div class="download-buttons">
                <a href="#" class="download-btn btn-appstore">
                    <i class="fab fa-apple"></i>
                    <div>
                        <div>Download on the</div>
                        <div>App Store</div>
                    </div>
                </a>
                <a href="#" class="download-btn btn-googleplay">
                    <i class="fab fa-google-play"></i>
                    <div>
                        <div>Get it on</div>
                        <div>Google Play</div>
                    </div>
                </a>
            </div>
        </div>
    </section>
    <!-Features Section -->
    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title">核心功能</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>极速体验</h3>
                    <p>优化的性能和流畅的动画，让您的操作如闪电般迅速</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>安全可靠</h3>
                    <p>银行级加密技术，全方位保护您的个人数据和隐私</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-sync"></i>
                    </div>
                    <h3>实时同步</h3>
                    <p>多设备无缝同步，随时随地访问您的最新数据</p>
                </div>
            </div>
        </div>
    </section>
    <!-Screenshots Section -->
    <section class="screenshots" id="screenshots">
        <div class="container">
            <h2 class="section-title">应用截图</h2>
            <div class="screenshot-slider">
                <div class="screenshot-item">
                    <img src="https://via.placeholder.com/300/600" alt="截图1">
                </div>
                <div class="screenshot-item">
                    <img src="https://via.placeholder.com/300/600" alt="截图2">
                </div>
                <div class="screenshot-item">
                    <img src="https://via.placeholder.com/300/600" alt="截图3">
                </div>
                <div class="screenshot-item">
                    <img src="https://via.placeholder.com/300/600" alt="截图4">
                </div>
                <div class="screenshot-item">
                    <img src="https://via.placeholder.com/300/600" alt="截图5">
                </div>
            </div>
        </div>
    </section>
    <!-Footer -->
    <footer id="contact">
        <div class="container">
            <div class="footer-links">
                <a href="#">隐私政策</a>
                <a href="#">使用条款</a>
                <a href="#">支持中心</a>
                <a href="#">关于我们</a>
            </div>
            <p class="copyright">&copy; 2025 App名称. 保留所有权利.</p>
        </div>
    </footer>
    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        // 滚动动画
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = 1;
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        document.querySelectorAll('.feature-card, .screenshot-item').forEach(el => {
            el.style.opacity = 0;
            el.style.transform = 'translateY(20px)';
            el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            observer.observe(el);
        });
    </script>
</body>
</html>

功能特点：

  1. 响应式设计：完美适配手机、平板和桌面设备
  2. 下载按钮：分别指向App Store和Google Play
  3. 功能展示：卡片式布局展示核心功能
  4. 截图轮播：横向滚动展示应用截图
  5. 平滑滚动：点击导航链接平滑滚动到对应区域
  6. 滚动动画：元素进入视口时渐显效果
  7. 现代UI：采用iOS设计风格，简洁美观

自定义说明：

  1. 替换占位图片：

    app下载页网站源码

    • 将 https://via.placeholder.com/400/800 替换为实际App预览图
    • 替换所有截图占位图片

  2. 修改应用信息：

    app下载页网站源码

    • "App名称" 为您的应用名称
    • 更新描述文字和功能特色

  3. 更新下载链接：

    • 修改 <a href="#"> 中的 为实际下载链接
    • App Store链接格式：https://apps.apple.com/app/id您的应用ID
    • Google Play链接格式：https://play.google.com/store/apps/details?id=您的包名

  4. 自定义颜色：

    • 在 root 中修改CSS变量（如 --primary、--secondary）

  5. 扩展功能：

    • 可添加用户评价区域
    • 增加FAQ常见问题
    • 添加应用版本更新日志
    • 集成用户行为分析代码

这个源码提供了完整的App下载页面基础框架,您可以根据实际需求进行扩展和定制。

app下载页网站源码

相关内容

回顶部