index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vercel测试网站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --aliyun-orange: #FF6A00;
            --aliyun-dark: #333333;
            --aliyun-light: #F5F5F5;
            --aliyun-blue: #0070CC;
        }
        
        body {
            background-color: #f9f9f9;
            color: var(--aliyun-dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo h1 {
            color: var(--aliyun-orange);
            font-size: 24px;
            margin-left: 10px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--aliyun-dark);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--aliyun-orange);
        }
        
        /* 主内容区样式 */
        .hero {
            background: linear-gradient(135deg, #FF6A00 0%, #FF8C3A 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: white;
            color: var(--aliyun-orange);
            padding: 12px 30px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background-color: rgba(255, 255, 255, 0.9);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        /* 特性区域样式 */
        .features {
            padding: 80px 0;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .section-title h2 {
            font-size: 2rem;
            color: var(--aliyun-dark);
            margin-bottom: 15px;
        }
        
        .section-title p {
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background-color: var(--aliyun-light);
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 40px;
            color: var(--aliyun-orange);
            margin-bottom: 20px;
        }
        
        .feature-card h3 {
            margin-bottom: 15px;
            font-size: 1.3rem;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--aliyun-dark);
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            position: relative;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 30px;
            height: 2px;
            background-color: var(--aliyun-orange);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
            color: #999;
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }
            
            .nav-links {
                margin-top: 20px;
            }
            
            .nav-links li {
                margin: 0 10px;
            }
            
            .hero h2 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
        }
        
        /* 测试区域样式 */
        .test-area {
            padding: 60px 0;
            background-color: var(--aliyun-light);
        }
        
        .test-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .submit-btn {
            background-color: var(--aliyun-orange);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #e55f00;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 0C8.954 0 0 8.954 0 20C0 31.046 8.954 40 20 40C31.046 40 40 31.046 40 20C40 8.954 31.046 0 20 0Z" fill="#FF6A00"/>
                        <path d="M25.5 12.5H14.5C13.12 12.5 12 13.62 12 15V25C12 26.38 13.12 27.5 14.5 27.5H25.5C26.88 27.5 28 26.38 28 25V15C28 13.62 26.88 12.5 25.5 12.5ZM20 24C17.24 24 15 21.76 15 19C15 16.24 17.24 14 20 14C22.76 14 25 16.24 25 19C25 21.76 22.76 24 20 24Z" fill="white"/>
                    </svg>
                    <h1>vercel测试网站</h1>
                </div>
                <ul class="nav-links">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#features">特性</a></li>
                    <li><a href="#test">测试</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <section class="hero" id="home">
        <div class="container">
            <h2>欢迎访问vercel测试网站</h2>
            <p>vercel用于测试vercel域名和服务器部署的示例网站，展示了基本的网页结构和响应式设计。</p>
            <a href="#test" class="btn">开始测试</a>
        </div>
    </section>

    <!-- 特性区域 -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-title">
                <h2>网站特性</h2>
                <p>这个测试网站展示了现代网页设计的基本要素</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📱</div>
                    <h3>响应式设计</h3>
                    <p>自适应各种屏幕尺寸，在手机、平板和电脑上都能完美显示。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>现代化设计</h3>
                    <p>采用vercel品牌色彩，简洁专业的界面设计。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>快速加载</h3>
                    <p>优化代码结构，确保页面快速加载，提升用户体验。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 测试区域 -->
    <section class="test-area" id="test">
        <div class="container">
            <div class="section-title">
                <h2>功能测试</h2>
                <p>测试网站的表单功能和交互效果</p>
            </div>
            <div class="test-form">
                <form id="testForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" placeholder="请输入您的电子邮箱">
                    </div>
                    <div class="form-group">
                        <label for="message">测试留言</label>
                        <textarea id="message" placeholder="请输入您的留言"></textarea>
                    </div>
                    <button type="submit" class="submit-btn">提交测试</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">团队介绍</a></li>
                        <li><a href="#">发展历程</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>产品服务</h3>
                    <ul class="footer-links">
                        <li><a href="#">云服务器</a></li>
                        <li><a href="#">域名注册</a></li>
                        <li><a href="#">网站备案</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>联系我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">客服热线</a></li>
                        <li><a href="#">技术支持</a></li>
                        <li><a href="#">意见反馈</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 vercel测试网站 - 本页面仅用于测试目的</p>
            </div>
        </div>
    </footer>

    <script>
        // 简单的表单提交处理
        document.getElementById('testForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;
            
            if(name && email && message) {
                alert('测试提交成功！\n姓名: ' + name + '\n邮箱: ' + email + '\n留言: ' + message);
                document.getElementById('testForm').reset();
            } else {
                alert('请填写所有字段！');
            }
        });
        
        // 平滑滚动效果
        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'
                    });
                }
            });
        });
    </script>
</body>
</html>