[网站模板]数码电子科技城网站

文章摘要:响应式设计: 使用CSS Grid和Flexbox布局,媒体查询适配不同屏幕尺寸,小屏幕设备上的汉堡菜单导航。 暗黑/亮色模式: 点击右上角按钮切换主题,使用CSS变量实现主题切换,主题偏好保存在本地存储中。 现代UI元素: 渐变色和微光效果,卡片悬停动画,科技感图标和布局。 关键区域: 引人注目的大字区域,特色服务展示,热门产品部分,信息丰富的页脚。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来数码电子科技城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4e6fff;
            --primary-dark: #3a5afd;
            --secondary: #00c6ff;
            --dark-bg: #0f172a;
            --dark-card: #1e293b;
            --dark-text: #f1f5f9;
            --light-bg: #f8fafc;
            --light-card: #ffffff;
            --light-text: #0a0a0a;
            --transition: all 0.3s ease;
            --q-color:#94a3b8;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--dark-bg);
            color: var(--dark-text);
            transition: var(--transition);
        }

        body.light-mode {
            background-color: var(--light-bg);
            color: var(--light-text);
            --q-color: var(--light-text);
        }

        /* 导航栏样式 */
        header {
            background-color: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            padding: 1rem 5%;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

        body.light-mode header {
            background-color: rgba(248, 250, 252, 0.9);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-icon {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .logo-text {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            color: var(--dark-text);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }

        .nav-links a:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            transition: var(--transition);
        }

        .nav-links a:hover:after {
            width: 100%;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        body.light-mode .nav-links a {
            color: var(--light-text);
        }

        .theme-toggle {
            background: none;
            border: none;
            color: var(--dark-text);
            cursor: pointer;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        body.light-mode .theme-toggle {
            color: var(--light-text);
        }

        .hamburger {
            display: none;
            background: none;
            border: none;
            color: var(--dark-text);
            font-size: 1.5rem;
            cursor: pointer;
        }

        body.light-mode .hamburger {
            color: var(--light-text);
        }

        /* 英雄区域 */
        .hero {
            padding: 5rem 5%;
            min-height: 80vh;
            display: flex;
            align-items: center;
            background: radial-gradient(circle at 10% 20%, rgba(78, 111, 255, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
        }

        body.light-mode .hero {
            background: radial-gradient(circle at 10% 20%, rgba(78, 111, 255, 0.05) 0%, rgba(248, 250, 252, 0) 50%);
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-text p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: #94a3b8;
            max-width: 600px;
        }

        body.light-mode .hero-text p {
            color: #64748b;
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(78, 111, 255, 0.4);
        }

        .hero-image {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .hero-image-container {
            width: 100%;
            max-width: 500px;
            height: 400px;
            background: linear-gradient(45deg, rgba(78, 111, 255, 0.2), rgba(0, 198, 255, 0.2));
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .glowing-circle {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            filter: blur(50px);
            opacity: 0.4;
            animation: pulse 4s infinite alternate;
        }

        .tech-icons {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            z-index: 2;
        }

        .tech-icon {
            width: 80px;
            height: 80px;
            background-color: var(--dark-card);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: var(--transition);
        }

        body.light-mode .tech-icon {
            background-color: var(--light-card);
        }

        .tech-icon:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        }

        /* 特色区域 */
        .features {
            padding: 5rem 5%;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto 3rem;
            font-size: 1.1rem;
        }

        body.light-mode .section-subtitle {
            color: #64748b;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background-color: var(--dark-card);
            border-radius: 15px;
            padding: 2rem;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        body.light-mode .feature-card {
            background-color: var(--light-card);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border-color: rgba(78, 111, 255, 0.2);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .feature-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .feature-description {
            color: #94a3b8;
            line-height: 1.6;
        }

        body.light-mode .feature-description {
            color: #64748b;
        }

        /* 产品展示区 */
        .products {
            padding: 5rem 5%;
            background: radial-gradient(circle at 90% 50%, rgba(78, 111, 255, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
        }

        body.light-mode .products {
            background: radial-gradient(circle at 90% 50%, rgba(78, 111, 255, 0.05) 0%, rgba(248, 250, 252, 0) 50%);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-card {
            background-color: var(--dark-card);
            border-radius: 15px;
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        body.light-mode .product-card {
            background-color: var(--light-card);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        .product-image {
            height: 200px;
            background: linear-gradient(45deg, rgba(78, 111, 255, 0.2), rgba(0, 198, 255, 0.2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: var(--primary);
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--primary);
        }

        .product-description {
            color: #94a3b8;
            margin-bottom: 1.5rem;
        }

        body.light-mode .product-description {
            color: #64748b;
        }

        /* 页脚 */
        footer {
            background-color: var(--dark-card);
            padding: 3rem 5%;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        body.light-mode footer {
            background-color: var(--light-card);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
        }

        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border-radius: 3px;
        }

        .footer-column .about_text {
            color: var(--q-color);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
            color: var(--q-color);
        }

        .footer-links a {
            color: var(--q-color);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--primary);
            padding-left: 5px;
        }

        body.light-mode .footer-links a {
            color: var(--light-text);
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background-color: var(--dark-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .social-icon {
            color: var(--dark-text);
            text-decoration: none;
        }

        body.light-mode .social-icon {
            background-color: #e2e8f0;
            color: var(--light-text);
        }

        .social-icon:hover {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            transform: translateY(-5px);
        }

        body.light-mode .social-icon:hover {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            transform: translateY(-5px);
        }

        .copyright {
            text-align: center;
            padding-top: 3rem;
            color: #94a3b8;
            font-size: 0.9rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .copyright a {
            text-decoration: none;
            color: var(--dark-text);
        }

        body.light-mode .copyright {
            color: #64748b;
        }
         body.light-mode .copyright a {
            color: var(--light-text);
        }
        /* 动画 */
        @keyframes pulse {
            0% {
                transform: scale(0.9);
                opacity: 0.4;
            }
            100% {
                transform: scale(1.1);
                opacity: 0.6;
            }
        }

        /* 响应式设计 */
        @media screen and (max-width: 992px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .hero-text {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            
            .hero-text p {
                max-width: 100%;
            }
        }

        @media screen and (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                background-color: var(--dark-card);
                width: 100%;
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                gap: 1.5rem;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: var(--transition);
                z-index: 99;
            }
            
            body.light-mode .nav-links {
                background-color: var(--light-card);
            }
            
            .nav-links.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            
            .hamburger {
                display: block;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
        }

        @media screen and (max-width: 480px) {
            .section-title {
                font-size: 2rem;
            }
            
            .hero-text h1 {
                font-size: 2rem;
            }
            
            .hero-text p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav class="navbar">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-microchip"></i>
                </div>
                <div class="logo-text">XG数码电子科技城</div>
            </div>
            
            <ul class="nav-links">
                <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-shopping-bag"></i> 产品中心</a></li>
                <li><a href="#footer-column-about"><i class="fas fa-info-circle"></i> 关于我们</a></li>
                <li><a href="#"><i class="fas fa-headset"></i> 技术支持</a></li>
                <li><a href="#footer-column-contact"><i class="fas fa-phone-alt"></i> 联系我们</a></li>
            </ul>
            
            <button class="theme-toggle" id="themeToggle">
                <i class="fas fa-moon"></i>
            </button>
            
            <button class="hamburger" id="hamburger">
                <i class="fas fa-bars"></i>
            </button>
        </nav>
    </header>
    
    <!-- 英雄区域 -->
    <section class="hero">
        <div class="hero-content">
            <div class="hero-text">
                <h1>探索未来科技世界</h1>
                <p>XG数码电子科技城为您提供最前沿的电子产品、智能设备和技术解决方案。我们致力于打造一个集创新、科技与生活于一体的电子科技生态圈。</p>
                <a href="#" class="cta-button">立即探索 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="hero-image">
                <div class="hero-image-container">
                    <div class="glowing-circle"></div>
                    <div class="tech-icons">
                        <div class="tech-icon"><i class="fas fa-laptop"></i></div>
                        <div class="tech-icon"><i class="fas fa-mobile-alt"></i></div>
                        <div class="tech-icon"><i class="fas fa-headphones"></i></div>
                        <div class="tech-icon"><i class="fas fa-camera"></i></div>
                        <div class="tech-icon"><i class="fas fa-gamepad"></i></div>
                        <div class="tech-icon"><i class="fas fa-tablet-alt"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 特色区域 -->
    <section class="features">
        <h2 class="section-title">我们的优势</h2>
        <p class="section-subtitle">XG数码电子科技城提供全方位的电子产品服务与解决方案,满足您对科技生活的所有想象</p>
        
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>
                <h3 class="feature-title">快速配送</h3>
                <p class="feature-description">覆盖全国300+城市的极速物流网络,确保您第一时间收到心仪的产品</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 class="feature-title">正品保障</h3>
                <p class="feature-description">所有产品均为官方授权正品,提供完善的售后保障与技术支持</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3 class="feature-title">专业支持</h3>
                <p class="feature-description">7×24小时专业客服团队,随时为您解答技术问题与产品咨询</p>
            </div>
        </div>
    </section>
    
    <!-- 产品展示区 -->
    <section class="products">
        <h2 class="section-title">热门产品</h2>
        <p class="section-subtitle">探索我们最新最热门的电子产品,享受科技带来的无限可能</p>
        
        <div class="products-grid">
            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-laptop"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">超极本 Pro X</h3>
                    <div class="product-price">¥8,999</div>
                    <p class="product-description">14英寸4K显示屏,第12代酷睿i7处理器,16GB内存,1TB SSD</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>
            
            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">智能手机 Alpha</h3>
                    <div class="product-price">¥5,299</div>
                    <p class="product-description">6.7英寸AMOLED屏幕,骁龙8 Gen2处理器,120Hz刷新率</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>
            
            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-headphones"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">降噪耳机 Pro</h3>
                    <div class="product-price">¥1,299</div>
                    <p class="product-description">主动降噪技术,30小时续航,Hi-Fi音质,无线充电</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-headphones"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">降噪耳机 Pro</h3>
                    <div class="product-price">¥1,299</div>
                    <p class="product-description">主动降噪技术,30小时续航,Hi-Fi音质,无线充电</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">智能手机 Alpha</h3>
                    <div class="product-price">¥5,299</div>
                    <p class="product-description">6.7英寸AMOLED屏幕,骁龙8 Gen2处理器,120Hz刷新率</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <i class="fas fa-laptop"></i>
                </div>
                <div class="product-info">
                    <h3 class="product-title">超极本 Pro X</h3>
                    <div class="product-price">¥8,999</div>
                    <p class="product-description">14英寸4K显示屏,第12代酷睿i7处理器,16GB内存,1TB SSD</p>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column" id="footer-column-about">
                <h3>关于我们</h3>
                <p class="about_text">XG数码电子科技城成立于2010年,是领先的电子产品零售与解决方案提供商,致力于为消费者带来最前沿的科技体验。</p>
                <div class="social-icons">
                    <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-tiktok"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-bilibili"></i></a>
                </div>
            </div>
            
            <div class="footer-column">
                <h3>快速链接</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 首页</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 产品中心</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 促销活动</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 技术支持</a></li>
                    <li><a href="#"><i class="fas fa-chevron-right"></i> 关于我们</a></li>
                </ul>
            </div>
            
            <div class="footer-column" id="footer-column-contact">
                <h3>联系我们</h3>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt"></i> 深圳市南山区科技园A区8888号</li>
                    <li><i class="fas fa-phone-alt"></i> 400-8888-9999</li>
                    <li><i class="fas fa-envelope"></i> xg@tomde.cloud</li>
                    <li><i class="fas fa-clock"></i> 周一至周日: 9:00 - 21:00</li>
                </ul>
            </div>
        </div>
        
        <div class="copyright">
            <p>© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a></p>
        </div>
    </footer>
    
    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const body = document.body;
        const themeIcon = themeToggle.querySelector('i');
        
        // 检查本地存储中的主题设置
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'light') {
            body.classList.add('light-mode');
            themeIcon.classList.replace('fa-moon', 'fa-sun');
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('light-mode');
            
            if (body.classList.contains('light-mode')) {
                themeIcon.classList.replace('fa-moon', 'fa-sun');
                localStorage.setItem('theme', 'light');
            } else {
                themeIcon.classList.replace('fa-sun', 'fa-moon');
                localStorage.setItem('theme', 'dark');
            }
        });
        
        // 移动端导航菜单
        const hamburger = document.getElementById('hamburger');
        const navLinks = document.querySelector('.nav-links');
        
        hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            
            // 切换汉堡菜单图标
            const icon = hamburger.querySelector('i');
            if (navLinks.classList.contains('active')) {
                icon.classList.replace('fa-bars', 'fa-times');
            } else {
                icon.classList.replace('fa-times', 'fa-bars');
            }
        });
        
        // 关闭移动菜单当点击菜单项时
        const navItems = document.querySelectorAll('.nav-links a');
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.querySelector('i').classList.replace('fa-times', 'fa-bars');
            });
        });
    </script>
</body>
</html>