白云智能云网站建设代码如何实现？-菜鸟科技网

由于完整的、生产级别的网站代码非常庞大，我会为您提供一个功能完整、结构清晰、易于扩展的前端代码框架，这个框架包含了首页、服务介绍、关于我们和联系页面，并使用了流行的技术栈。

（图片来源网络，侵删）

技术栈选择

HTML5: 语义化标签构建页面结构。
Tailwind CSS: 一个功能优先的 CSS 框架，可以快速构建美观的响应式界面。
JavaScript (原生): 实现交互功能，如导航栏滚动效果、轮播图等。
Font Awesome: 提供高质量的图标。

项目结构

创建一个文件夹 baiyun-cloud，并在其中创建以下文件和子文件夹：

baiyun-cloud/
├── index.html          # 首页
├── services.html       # 服务介绍页
├── about.html          # 关于我们页
├── contact.html        # 联系我们页
├── css/
│   └── style.css       # 自定义样式 (用于覆盖或补充 Tailwind)
├── js/
│   └── main.js         # 主要的JavaScript逻辑
└── images/             # 存放图片资源
    ├── logo.png
    ├── hero-bg.jpg
    └── ...

第1步：准备工作 - 引入依赖

在所有 HTML 文件的 <head> 标签内，引入 Tailwind CSS 和 Font Awesome，我们使用 CDN 链接，这样无需本地安装即可快速开始。

<!-- 在所有 HTML 文件的 <head> 中添加 -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

第2步：创建共享组件 (导航栏和页脚)

为了保持代码的复用性和一致性,我们将导航栏和页脚做成独立的 HTML 片段，然后通过 iframe 或服务器端包含（如 SSI, PHP include）的方式引入，为了演示的简洁性，我们直接在每个页面中复制它们，但在实际项目中，强烈建议模块化。

`navbar.html` (将此代码复制到每个页面的 `<body>` 开始处)

<nav class="bg-white shadow-lg fixed w-full top-0 z-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <!-- Logo -->
                <a href="index.html" class="flex-shrink-0 flex items-center">
                    <img class="h-8 w-auto" src="images/logo.png" alt="白云智能云 Logo">
                    <span class="ml-2 text-xl font-bold text-gray-800">白云智能云</span>
                </a>
                <!-- 导航菜单 (桌面端) -->
                <div class="hidden md:ml-10 md:flex md:space-x-8">
                    <a href="index.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">首页</a>
                    <a href="services.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">服务</a>
                    <a href="about.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">关于我们</a>
                    <a href="contact.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">联系我们</a>
                </div>
            </div>
            <!-- CTA 按钮 -->
            <div class="hidden md:flex items-center">
                <a href="contact.html" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
                    开始使用
                </a>
            </div>
            <!-- 移动端菜单按钮 -->
            <div class="-mr-2 flex items-center md:hidden">
                <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </div>
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="hidden md:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="index.html" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">首页</a>
            <a href="services.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">服务</a>
            <a href="about.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">关于我们</a>
            <a href="contact.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">联系我们</a>
        </div>
    </div>
</nav>

`footer.html` (将此代码复制到每个页面的 `<body>` 结束处前)

<footer class="bg-gray-800 text-white">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <!-- 公司信息 -->
            <div class="col-span-1 md:col-span-2">
                <h3 class="text-lg font-semibold mb-4">白云智能云</h3>
                <p class="text-gray-300 text-sm mb-4">
                    致力于为企业提供稳定、高效、智能的云计算解决方案，助力您的业务腾飞。
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo text-xl"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
                </div>
            </div>
            <!-- 快速链接 -->
            <div>
                <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                <ul class="space-y-2">
                    <li><a href="services.html" class="text-gray-300 hover:text-white text-sm">我们的服务</a></li>
                    <li><a href="about.html" class="text-gray-300 hover:text-white text-sm">关于我们</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white text-sm">博客</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white text-sm">帮助中心</a></li>
                </ul>
            </div>
            <!-- 联系方式 -->
            <div>
                <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                <ul class="space-y-2 text-sm text-gray-300">
                    <li><i class="fas fa-envelope mr-2"></i> contact@baiyunyun.com</li>
                    <li><i class="fas fa-phone mr-2"></i> 400-888-9999</li>
                    <li><i class="fas fa-map-marker-alt mr-2"></i> 广州市天河区智慧云城</li>
                </ul>
            </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-700 text-center text-sm text-gray-400">
            &copy; 2025 白云智能云. All rights reserved.
        </div>
    </div>
</footer>

第3步：创建 `main.js` 文件

在 js 文件夹中创建 main.js，用于处理导航栏滚动效果和移动端菜单的交互。

（图片来源网络，侵删）

// js/main.js
document.addEventListener('DOMContentLoaded', function() {
    // 1. 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
    // 2. 导航栏滚动效果
    const nav = document.querySelector('nav');
    if (nav) {
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) { // 如果滚动超过50px
                nav.classList.add('shadow-lg');
            } else {
                nav.classList.remove('shadow-lg');
            }
        });
    }
    // 3. 平滑滚动到锚点 (如果页面内有锚点链接)
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
            // 关闭移动端菜单 (如果打开)
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
            }
        });
    });
});

第4步：构建各个页面

我们将共享组件和特定内容组合起来,创建各个页面。

`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>
    <!-- 引入 Tailwind CSS 和 Font Awesome -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入自定义 JS -->
    <script src="js/main.js" defer></script>
    <style>
        /* 自定义样式 */
        .hero-bg {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/hero-bg.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body class="font-sans antialiased">
    <!-- 导航栏 -->
    <nav> ... </nav> <!-- 在这里粘贴 navbar.html 的代码 -->
    <!-- 主要内容 -->
    <main>
        <!-- Hero Section (英雄区域) -->
        <section class="hero-bg h-screen flex items-center justify-center text-white">
            <div class="text-center px-4">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">智能云服务，驱动未来</h1>
                <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">为您的业务提供稳定、安全、高效的云计算基础设施与智能化解决方案。</p>
                <div class="space-x-4">
                    <a href="services.html" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                        了解更多
                    </a>
                    <a href="contact.html" class="inline-block border-2 border-white hover:bg-white hover:text-gray-800 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                        立即咨询
                    </a>
                </div>
            </div>
        </section>
        <!-- Features Section (特性介绍) -->
        <section class="py-20 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">为什么选择我们</h2>
                    <p class="mt-4 text-xl text-gray-600">我们致力于提供卓越的云服务体验</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center p-6">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-md bg-blue-100 text-blue-600 mb-4">
                            <i class="fas fa-rocket text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">高性能</h3>
                        <p class="text-gray-600">采用最新硬件技术，确保您的应用运行在极致性能的环境中。</p>
                    </div>
                    <div class="text-center p-6">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-md bg-green-100 text-green-600 mb-4">
                            <i class="fas fa-shield-alt text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">安全可靠</h3>
                        <p class="text-gray-600">多层安全防护体系，24/7 监控，保障您的数据万无一失。</p>
                    </div>
                    <div class="text-center p-6">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-md bg-purple-100 text-purple-600 mb-4">
                            <i class="fas fa-brain text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">智能运维</h3>
                        <p class="text-gray-600">AI 驱动的自动化运维，降低您的人力成本，提升运维效率。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA Section (行动号召) -->
        <section class="py-20 bg-blue-600">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">准备开始您的云之旅了吗？</h2>
                <p class="mt-4 text-xl text-blue-100">立即注册，享受新用户专享优惠。</p>
                <a href="contact.html" class="mt-8 inline-block bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-full text-lg transition duration-300">
                    免费试用
                </a>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer> ... </footer> <!-- 在这里粘贴 footer.html 的代码 -->
</body>
</html>

`services.html` (服务介绍页)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">服务介绍 - 白云智能云</title>
    <!-- 引入 Tailwind CSS 和 Font Awesome -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入自定义 JS -->
    <script src="js/main.js" defer></script>
</head>
<body class="font-sans antialiased">
    <!-- 导航栏 -->
    <nav> ... </nav> <!-- 在这里粘贴 navbar.html 的代码 -->
    <!-- 主要内容 -->
    <main>
        <!-- Page Header -->
        <section class="bg-gray-100 py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h1 class="text-4xl font-extrabold text-gray-900">我们的服务</h1>
                <p class="mt-4 text-xl text-gray-600">全方位的云解决方案，满足您的多样化需求</p>
            </div>
        </section>
        <!-- Services Grid -->
        <section class="py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 服务卡片 1 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-blue-100 text-blue-600 mx-auto mb-4">
                                <i class="fas fa-server text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">云服务器</h3>
                            <p class="text-gray-600 text-center">弹性可扩展的计算服务，为您提供稳定、高性能的云端算力。</p>
                        </div>
                    </div>
                    <!-- 服务卡片 2 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-green-100 text-green-600 mx-auto mb-4">
                                <i class="fas fa-database text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">云数据库</h3>
                            <p class="text-gray-600 text-center">支持多种数据库引擎，提供自动备份、高可用、容灾等能力。</p>
                        </div>
                    </div>
                    <!-- 服务卡片 3 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-purple-100 text-purple-600 mx-auto mb-4">
                                <i class="fas fa-network-wired text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">云网络</h3>
                            <p class="text-gray-600 text-center">安全、稳定、高速的云上网络服务，轻松构建复杂的网络架构。</p>
                        </div>
                    </div>
                    <!-- 服务卡片 4 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-yellow-100 text-yellow-600 mx-auto mb-4">
                                <i class="fas fa-robot text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">AI 智能平台</h3>
                            <p class="text-gray-600 text-center">提供机器学习、深度学习等 AI 服务，让智能触手可及。</p>
                        </div>
                    </div>
                    <!-- 服务卡片 5 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-red-100 text-red-600 mx-auto mb-4">
                                <i class="fas fa-shield-virus text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">安全防护</h3>
                            <p class="text-gray-600 text-center">DDoS 防护、WAF、漏洞扫描等一站式安全服务，守护您的云上资产。</p>
                        </div>
                    </div>
                    <!-- 服务卡片 6 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">
                        <div class="p-6">
                            <div class="flex items-center justify-center h-16 w-16 rounded-md bg-indigo-100 text-indigo-600 mx-auto mb-4">
                                <i class="fas fa-headset text-3xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-center text-gray-900 mb-2">技术支持</h3>
                            <p class="text-gray-600 text-center">7x24 小时专业技术支持团队，随时为您解决疑难问题。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer> ... </footer> <!-- 在这里粘贴 footer.html 的代码 -->
</body>
</html>

`about.html` 和 `contact.html`

这两个页面的结构与首页和服务页类似,只需将 <main> 中的内容替换为即可。

about.html 的 <main> 内容示例:

<main>
    <section class="bg-gray-100 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-extrabold text-gray-900">关于我们</h1>
            <p class="mt-4 text-xl text-gray-600">了解白云智能云的故事和使命</p>
        </div>
    </section>
    <section class="py-16">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-lg text-gray-700">
                白云智能云成立于20XX年，由一群热爱云计算和人工智能技术的专家组建，我们相信，云计算是数字时代的基石，而智能是未来的方向，我们致力于将最前沿的 AI 技术与稳定可靠的云服务相结合，为企业和开发者赋能。
            </p>
            <!-- 可以添加更多公司介绍、团队照片、价值观等内容 -->
        </div>
    </section>
</main>

contact.html 的 <main> 内容示例:

<main>
    <section class="bg-gray-100 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-extrabold text-gray-900">联系我们</h1>
            <p class="mt-4 text-xl text-gray-600">有任何问题或建议，我们随时欢迎您</p>
        </div>
    </section>
    <section class="py-16">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-lg shadow-md p-8">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                            <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                            <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div class="mb-6">
                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                        <input type="text" id="subject" name="subject" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言</label>
                        <textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
                            发送消息
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>

如何运行和下一步

保存文件: 将以上所有代码保存到对应的文件中。
准备图片: 在 images 文件夹中放入你的 logo.png 和 hero-bg.jpg 等图片。
打开浏览器: 直接用浏览器打开 index.html 文件，你就能看到一个功能完整的网站了。

下一步可以做什么？

后端开发: 这个前端框架需要后端来支持，你可以使用 Node.js (Express), Python (Django/Flask), PHP (Laravel) 等技术来创建后端 API，处理用户注册、登录、提交表单等逻辑。
数据库: 设计并创建数据库来存储用户信息、产品数据等。
更复杂的交互: 使用 Vue.js 或 React 等 JavaScript 框架来构建更动态、更复杂的单页应用。
SEO 优化: 添加 meta 描述、结构化数据等，以提升搜索引擎排名。
部署: 将你的网站部署到云服务器上，如阿里云、腾讯云或 Vercel、Netlify 等。

这个代码框架为你提供了一个坚实的基础,你可以根据自己的需求进行修改和扩展。

白云智能云网站建设代码如何实现？

技术栈选择

项目结构

第1步：准备工作 - 引入依赖

第2步：创建共享组件 (导航栏和页脚)

`navbar.html` (将此代码复制到每个页面的 `<body>` 开始处)

`footer.html` (将此代码复制到每个页面的 `<body>` 结束处前)

第3步：创建 `main.js` 文件

第4步：构建各个页面

`index.html` (首页)

`services.html` (服务介绍页)

`about.html` 和 `contact.html`

如何运行和下一步

99ANYc3cd6

aix history命令

网站改版如何保留原有价值与流量？

大疆开放题考什么？招聘如何筛选人才？

Ubuntu挂起命令有哪些？

创建热区链接？

ipad如何创建网页连接不上，iPad创建网页为何连接不上？

搭建站点有那两种方法

一起中学学生如何有效提升听力能力？

4g代理服务器搭建

如何在百度主题推广中直接调用js文件

如何解决phpcms后台验证码不显示的问题

百词斩是如何创造出来的

Java项目框架谁搭建？开发团队还是架构师？

云服务器搭建三维图像

快速搭建网站优帮云

dw切图如何不让页面滚屏只显示一屏

白云智能云网站建设代码如何实现？

技术栈选择

项目结构

第1步：准备工作 - 引入依赖

第2步：创建共享组件 (导航栏和页脚)

navbar.html (将此代码复制到每个页面的 <body> 开始处)

footer.html (将此代码复制到每个页面的 <body> 结束处前)

第3步：创建 main.js 文件

第4步：构建各个页面

index.html (首页)

services.html (服务介绍页)

about.html 和 contact.html

如何运行和下一步

相关推荐

ipad如何创建网页连接不上，iPad创建网页为何连接不上？

`navbar.html` (将此代码复制到每个页面的 `<body>` 开始处)

`footer.html` (将此代码复制到每个页面的 `<body>` 结束处前)

第3步：创建 `main.js` 文件

`index.html` (首页)

`services.html` (服务介绍页)

`about.html` 和 `contact.html`