必看！HTML+CSS打造企业官网的终极指南，拿来即用！

<header>
        <div class="container">
            <div id="branding">
                <h1><span class="highlight">Acme</span> 网络科技</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#home">首页</a></li>
                    <li><a href="#about">关于我们</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#portfolio">案例</a></li>
                    <li><a href="#team">团队</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section id="showcase">
        <div class="container">
            <h1 class="fade-in">专业的网络解决方案</h1>
            <p class="fade-in">我们提供高质量的网络服务，帮助您的业务在数字时代蓬勃发展。</p>
            <a href="#contact" class="button pulse">联系我们</a>
        </div>
    </section>
    <section id="about">
        <div class="container">
            <h2 class="fade-in">关于我们</h2>
            <div class="about-content slide-in-left">
                <div class="about-text">
                    <p>Acme网络科技成立于2010年，是一家专注于提供全方位网络解决方案的科技公司。我们的使命是帮助企业在数字化转型的浪潮中脱颖而出，实现业务增长。</p>
                    <p>凭借我们经验丰富的团队和先进的技术，我们为客户提供从网站开发、移动应用到数字营销的一站式服务。我们相信，每个企业都应该拥有一个强大的在线形象，我们致力于将这一愿景变为现实。</p>
                </div>
                <div class="about-image">
                    <img src="https://via.placeholder.com/500x300" alt="关于我们">
                </div>
            </div>
        </div>
    </section>
    <section id="services">
        <div class="container">
            <h2 class="fade-in">我们的服务</h2>
            <div class="services-container">
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="网页设计">
                    <h3>网页设计</h3>
                    <p>我们创造美观实用的网站，助力您的在线形象。从响应式设计到用户体验优化，我们都能满足您的需求。</p>
                </div>
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="移动应用开发">
                    <h3>移动应用开发</h3>
                    <p>专业的移动应用开发团队，为您打造iOS和Android平台的高性能应用，让您的业务触手可及。</p>
                </div>
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="数字营销">
                    <h3>数字营销</h3>
                    <p>结合SEO、社交媒体营销和内容营销等策略，提升您的品牌知名度，吸引更多潜在客户。</p>
                </div>
            </div>
        </div>
    </section>
    <section id="portfolio">
        <div class="container">
            <h2 class="fade-in">成功案例</h2>
            <div class="portfolio-items">
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目1">
                    <h3>电子商务网站</h3>
                    <p>为某服装品牌开发的全功能电商平台</p>
                </div>
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目2">
                    <h3>企业管理系统</h3>
                    <p>为某制造业公司定制的内部管理系统</p>
                </div>
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目3">
                    <h3>教育类移动应用</h3>
                    <p>广受欢迎的在线学习平台移动应用</p>
                </div>
            </div>
        </div>
    </section>
    <section id="team">
        <div class="container">
            <h2 class="fade-in">我们的团队</h2>
            <div class="team-members">
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="张三">
                    <h3>张三</h3>
                    <p>创始人 & CEO</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="李四">
                    <h3>李四</h3>
                    <p>技术总监</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="王五">
                    <h3>王五</h3>
                    <p>设计主管</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="赵六">
                    <h3>赵六</h3>
                    <p>市场总监</p>
                </div>
            </div>
        </div>
    </se <header>
        <div class="container">
            <div id="branding">
                <h1><span class="highlight">Acme</span> 网络科技</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#home">首页</a></li>
                    <li><a href="#about">关于我们</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#portfolio">案例</a></li>
                    <li><a href="#team">团队</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section id="showcase">
        <div class="container">
            <h1 class="fade-in">专业的网络解决方案</h1>
            <p class="fade-in">我们提供高质量的网络服务，帮助您的业务在数字时代蓬勃发展。</p>
            <a href="#contact" class="button pulse">联系我们</a>
        </div>
    </section>
    <section id="about">
        <div class="container">
            <h2 class="fade-in">关于我们</h2>
            <div class="about-content slide-in-left">
                <div class="about-text">
                    <p>Acme网络科技成立于2010年，是一家专注于提供全方位网络解决方案的科技公司。我们的使命是帮助企业在数字化转型的浪潮中脱颖而出，实现业务增长。</p>
                    <p>凭借我们经验丰富的团队和先进的技术，我们为客户提供从网站开发、移动应用到数字营销的一站式服务。我们相信，每个企业都应该拥有一个强大的在线形象，我们致力于将这一愿景变为现实。</p>
                </div>
                <div class="about-image">
                    <img src="https://via.placeholder.com/500x300" alt="关于我们">
                </div>
            </div>
        </div>
    </section>
    <section id="services">
        <div class="container">
            <h2 class="fade-in">我们的服务</h2>
            <div class="services-container">
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="网页设计">
                    <h3>网页设计</h3>
                    <p>我们创造美观实用的网站，助力您的在线形象。从响应式设计到用户体验优化，我们都能满足您的需求。</p>
                </div>
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="移动应用开发">
                    <h3>移动应用开发</h3>
                    <p>专业的移动应用开发团队，为您打造iOS和Android平台的高性能应用，让您的业务触手可及。</p>
                </div>
                <div class="service-box fade-in">
                    <img src="https://via.placeholder.com/80" alt="数字营销">
                    <h3>数字营销</h3>
                    <p>结合SEO、社交媒体营销和内容营销等策略，提升您的品牌知名度，吸引更多潜在客户。</p>
                </div>
            </div>
        </div>
    </section>
    <section id="portfolio">
        <div class="container">
            <h2 class="fade-in">成功案例</h2>
            <div class="portfolio-items">
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目1">
                    <h3>电子商务网站</h3>
                    <p>为某服装品牌开发的全功能电商平台</p>
                </div>
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目2">
                    <h3>企业管理系统</h3>
                    <p>为某制造业公司定制的内部管理系统</p>
                </div>
                <div class="portfolio-item fade-in">
                    <img src="https://via.placeholder.com/300x200" alt="项目3">
                    <h3>教育类移动应用</h3>
                    <p>广受欢迎的在线学习平台移动应用</p>
                </div>
            </div>
        </div>
    </section>
    <section id="team">
        <div class="container">
            <h2 class="fade-in">我们的团队</h2>
            <div class="team-members">
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="张三">
                    <h3>张三</h3>
                    <p>创始人 & CEO</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="李四">
                    <h3>李四</h3>
                    <p>技术总监</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="王五">
                    <h3>王五</h3>
                    <p>设计主管</p>
                </div>
                <div class="team-member fade-in">
                    <img src="https://via.placeholder.com/150" alt="赵六">
                    <h3>赵六</h3>
                    <p>市场总监</p>
                </div>
            </div>
        </div>
    </section>
    <section id="contact">
        <div class="container">
            <h2 class="fade-in">联系我们</h2>
            <form class="fade-in">
                <input type="text" placeholder="您的姓名">
                <input type="email" placeholder="您的邮箱">
                <input type="tel" placeholder="您的电话">
                <textarea placeholder="您的留言" rows="5"></textarea>
                <button type="submit" class="button">发送消息</button>
            </form>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Acme 网络科技 &copy; 2024 | 电话: 123-456-7890 | 邮箱: info@acmetech.com</p>
        </div>
    </footer>ction>
    <section id="contact">
        <div class="container">
            <h2 class="fade-in">联系我们</h2>
            <form class="fade-in">
                <input type="text" placeholder="您的姓名">
                <input type="email" placeholder="您的邮箱">
                <input type="tel" placeholder="您的电话">
                <textarea placeholder="您的留言" rows="5"></textarea>
                <button type="submit" class="button">发送消息</button>
            </form>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Acme 网络科技 &copy; 2024 | 电话: 123-456-7890 | 邮箱: info@acmetech.com</p>
        </div>
    </footer>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            padding: 20px 0;
        }
        header {
            background: #35424a;
            color: #ffffff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header li {
            float: left;
            display: inline;
            padding: 0 20px 0 20px;
        }
        header #branding {
            float: left;
        }
        header #branding h1 {
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 10px;
        }
        header .highlight, header .current a {
            color: #e8491d;
            font-weight: bold;
        }
        header a:hover {
            color: #cccccc;
            font-weight: bold;
        }
        #showcase {
            min-height: 400px;
            background: url('https://via.placeholder.com/1500x400') no-repeat center center/cover;
            text-align: center;
            color: #ffffff;
            padding-top: 150px;
        }
        #showcase h1 {
            font-size: 55px;
            margin-bottom: 10px;
        }
        #showcase p {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .button {
            display: inline-block;
            font-size: 18px;
            color: #ffffff;
            background: #e8491d;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }
        .button:hover {
            background: #ff6a3c;
        }
        #about, #services, #portfolio, #team, #contact {
            padding: 40px 0;
        }
        #about {
            background: #f4f4f4;
        }
        .about-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .about-text {
            flex: 1;
            padding-right: 30px;
        }
        .about-image {
            flex: 1;
        }
        .about-image img {
            width: 100%;
            border-radius: 10px;
        }
        #services .services-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .service-box {
            flex-basis: 30%;
            text-align: center;
            padding: 20px;
            margin-bottom: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .service-box img {
            width: 80px;
            margin-bottom: 15px;
        }
        #portfolio .portfolio-items {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .portfolio-item {
            flex-basis: 30%;
            margin-bottom: 30px;
        }
        .portfolio-item img {
            width: 100%;
            border-radius: 5px;
        }
        #team .team-members {
            display: flex;
            justify-content: space-between;
        }
        .team-member {
            flex-basis: 22%;
            text-align: center;
        }
        .team-member img {
            width: 100%;
            border-radius: 50%;
            margin-bottom: 15px;
        }
        #contact form {
            display: flex;
            flex-direction: column;
        }
        #contact form input, #contact form textarea {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
        }
        footer {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
        }
        /* 动画效果相关的CSS */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
        .fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }
        @keyframes slideInFromLeft {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(0);
            }
        }
        .slide-in-left {
            animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        .service-box {
            transition: transform 0.3s ease-in-out;
        }
        .service-box:hover {
            transform: translateY(-10px);
        }
        html {
            scroll-behavior: smooth;
        }

// 淡入效果
        const faders = document.querySelectorAll('.fade-in');
        const appearOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -100px 0px"
        };
        const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    return;
                } else {
                    entry.target.classList.add('appear');
                    appearOnScroll.unobserve(entry.target);
                }
            });
        }, appearOptions);
        faders.forEach(fader => {
            appearOnScroll.observe(fader);
        });
        // 为导航添加平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });