打造现代感十足的卡片式企业官网：HTML+CSS全攻略！

<header class="header">
        <h1>创新科技有限公司</h1>
    </header>
    <div class="slider">
        <div class="slide active" style="background-color: var(--primary-color);">创新科技，引领未来</div>
        <div class="slide" style="background-color: var(--secondary-color);">智能解决方案，全球领先</div>
        <div class="slide" style="background-color: #e74c3c;">携手共创，共赢发展</div>
        <button class="slider-btn prev">&lt;</button>
        <button class="slider-btn next">&gt;</button>
        <div class="slider-nav">
            <span class="slider-dot active"></span>
            <span class="slider-dot"></span>
            <span class="slider-dot"></span>
        </div>
    </div>
    <div class="container">
        <div class="card-container">
            <div class="card">
                <div class="card-image" style="background-image: url('./img/2.png');"></div>
                <div class="card-content">
                    <h2 class="card-title">关于我们</h2>
                    <p class="card-text">创新科技是一家致力于推动技术边界的全球领先企业。我们的使命是通过创新解决方案改变世界。</p>
                    <a href="#" class="card-link">了解更多 &rarr;</a>
                </div>
            </div>
            <div class="card">
                <div class="card-image" style="background-image: url('./img/1.png');"></div>
                <div class="card-content">
                    <h2 class="card-title">产品与服务</h2>
                    <p class="card-text">探索我们广泛的产品线和服务，包括尖端软件解决方案、智能硬件和专业咨询服务。</p>
                    <a href="#" class="card-link">查看产品 &rarr;</a>
                </div>
            </div>
            <div class="card">
                <div class="card-image" style="background-image: url('./img/3.png');"></div>
                <div class="card-content">
                    <h2 class="card-title">最新动态</h2>
                    <p class="card-text">了解公司最新发展、行业趋势和技术突破。与我们一起站在创新的前沿。</p>
                    <a href="#" class="card-link">浏览新闻 &rarr;</a>
                </div>
            </div>
            <div class="card">
                <div class="card-image" style="background-image: url('./img/4.png');"></div>
                <div class="card-content">
                    <h2 class="card-title">加入我们</h2>
                    <p class="card-text">我们正在寻找充满激情的人才加入我们的创新团队。探索激动人心的职业机会和成长空间。</p>
                    <a href="#" class="card-link">查看职位 &rarr;</a>
                </div>
            </div>
        </div>
    </div>

:root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --text-color: #34495e;
            --bg-color: #ecf0f1;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        .header {
            background-color: #34495e;
            color: white;
            padding: 15px 0;
            
            h1{
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }
        }
        .slider {
            width: 100%;
            height: 400px;
            position: relative;
            overflow: hidden;
        }
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        .slide.active {
            opacity: 1;
        }
        .slider-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            margin: 0 5px;
            cursor: pointer;
        }
        .slider-dot.active {
            background-color: white;
        }
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,0.3);
            color: white;
            border: none;
            font-size: 2em;
            padding: 10px 15px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .slider-btn:hover {
            background-color: rgba(255,255,255,0.5);
        }
        .slider-btn.prev {
            left: 10px;
        }
        .slider-btn.next {
            right: 10px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 30px;
        }
        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
        }
        .card-image {
            height: 200px;
            background-color: #e0e0e0;
            background-size: cover;
            background-position: center;
        }
        .card-content {
            padding: 20px;
        }
        .card-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        .card-text {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-color);
        }
        .card-link {
            display: inline-block;
            margin-top: 15px;
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        .card-link:hover {
            color: var(--primary-color);
        }

const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.slider-dot');
        const prevBtn = document.querySelector('.slider-btn.prev');
        const nextBtn = document.querySelector('.slider-btn.next');
        let currentSlide = 0;
        
        function showSlide(n) {
            slides[currentSlide].classList.remove('active');
            dots[currentSlide].classList.remove('active');
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }
        function nextSlide() {
            showSlide(currentSlide + 1);
        }
        function prevSlide() {
            showSlide(currentSlide - 1);
        }
        prevBtn.addEventListener('click', prevSlide);
        nextBtn.addEventListener('click', nextSlide);
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => showSlide(index));
        });
        setInterval(nextSlide, 5000); // 每5秒自动切换一次幻灯片