这个模板将包含以下几个核心部分,并针对不同屏幕尺寸进行优化：

html5 css3单页面响应式模板
（图片来源网络，侵删）
  1. 导航栏：在桌面端水平显示，在移动端变为“汉堡”菜单。
  2. 英雄区域：引人注目的主标题和行动号召按钮。
  3. 特性介绍：使用卡片布局展示产品或服务的特点。
  4. 关于我们：包含图片和文字的简介区域。
  5. 联系表单：让访客可以方便地与您联系。
  6. 页脚：包含版权和社交媒体链接。

最终效果预览

  • 桌面端 (> 768px): 布局为多列，内容水平排列。
  • 移动端 (≤ 768px): 布局变为单列，导航栏折叠为汉堡菜单。

第一步：HTML 代码 (index.html)

这是页面的结构,我们使用了 HTML5 的语义化标签，如 <header>, <nav>, <main>, <section>, <footer>，这有助于 SEO 和可访问性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的响应式网站</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，这里使用 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#" class="logo">我的Logo</a>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#features">特性</a></li>
                    <li><a href="#about">lt;/a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>
    <main>
        <section id="home" class="hero">
            <div class="container">
                <h1>欢迎来到我的网站</h1>
                <p>这是一个使用 HTML5 和 CSS3 构建的现代化响应式单页面模板。</p>
                <a href="#features" class="cta-button">了解更多</a>
            </div>
        </section>
        <section id="features" class="features">
            <div class="container">
                <h2>我们的特性</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <i class="fas fa-mobile-alt"></i>
                        <h3>响应式设计</h3>
                        <p>完美适配手机、平板和桌面等各种设备。</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-paint-brush"></i>
                        <h3>现代UI</h3>
                        <p>采用最新的设计趋势，提供优雅的用户体验。</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-rocket"></i>
                        <h3>快速加载</h3>
                        <p>优化的代码结构，确保网站加载速度飞快。</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="about" class="about">
            <div class="container">
                <div class="about-content">
                    <div class="about-text">
                        <h2>关于我们</h2>
                        <p>我们是一支充满激情和创造力的团队，致力于为客户提供最优质的网络解决方案，我们相信，优秀的设计和强大的技术是成功的关键。</p>
                        <p>通过这个模板，您可以快速搭建起一个专业且美观的个人或企业网站。</p>
                    </div>
                    <div class="about-image">
                        <img src="https://via.placeholder.com/600x400.png?text=About+Us+Image" alt="关于我们">
                    </div>
                </div>
            </div>
        </section>
        <section id="contact" class="contact">
            <div class="container">
                <h2>联系我们</h2>
                <form class="contact-form">
                    <div class="form-group">
                        <input type="text" id="name" name="name" placeholder="您的姓名" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="email" name="email" placeholder="您的邮箱" required>
                    </div>
                    <div class="form-group">
                        <textarea id="message" name="message" rows="5" placeholder="您的留言" required></textarea>
                    </div>
                    <button type="submit" class="cta-button">发送消息</button>
                </form>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2025 我的公司. 保留所有权利.</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 代码 (style.css)

这是页面的样式表,定义了所有视觉效果和响应式行为。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 15px;
    line-height: 1.2;
}
p {
    margin-bottom: 15px;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.cta-button:hover {
    background-color: #0056b3;
}
/* --- 导航栏 --- */
header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 25px;
}
.main-nav a {
    color: var(--secondary-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
.main-nav a:hover {
    color: var(--primary-color);
}
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px 0;
    transition: 0.3s;
}
/* --- 英雄区域 --- */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1600x800.png?text=Hero+Image') no-repeat center center/cover;
    color: var(--white);
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
}
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}
.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 30px;
}
/* --- 特性区域 --- */
.features {
    padding: 80px 0;
    text-align: center;
}
.features h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.feature-card {
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-10px);
}
.feature-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
/* --- 关于我们区域 --- */
.about {
    padding: 80px 0;
    background-color: var(--light-bg);
}
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.about-image img {
    width: 100%;
    border-radius: 8px;
}
/* --- 联系表单区域 --- */
.contact {
    padding: 80px 0;
    text-align: center;
}
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* --- 页脚 --- */
footer {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 30px 0;
    text-align: center;
}
footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.social-links a {
    color: var(--white);
    margin: 0 10px;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--primary-color);
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    /* 导航栏响应式 */
    .hamburger {
        display: block;
    }
    .main-nav {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--white);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
        padding: 20px 0;
    }
    .main-nav.active {
        left: 0;
    }
    .main-nav ul {
        flex-direction: column;
    }
    .main-nav ul li {
        margin: 15px 0;
    }
    /* 英雄区域响应式 */
    .hero h1 {
        font-size: 2.5rem;
    }
    /* 关于我们区域响应式 */
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-image {
        order: -1; /* 将图片移到文字上方 */
    }
    /* 页脚响应式 */
    footer .container {
        flex-direction: column;
        gap: 20px;
    }
}

第三步：JavaScript 代码 (script.js)

这是实现交互功能的关键,特别是移动端的“汉堡”菜单。

document.addEventListener('DOMContentLoaded', () => {
    // 获取汉堡菜单和导航栏元素
    const hamburger = document.querySelector('.hamburger');
    const mainNav = document.querySelector('.main-nav');
    // 点击汉堡菜单时，切换导航栏的激活状态
    hamburger.addEventListener('click', () => {
        mainNav.classList.toggle('active');
        // 汉堡菜单动画效果（可选）
        hamburger.classList.toggle('open');
    });
    // 点击导航链接后，关闭移动端菜单
    const navLinks = document.querySelectorAll('.main-nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            if (mainNav.classList.contains('active')) {
                mainNav.classList.remove('active');
                hamburger.classList.remove('open');
            }
        });
    });
    // 表单提交处理（示例）
    const contactForm = document.querySelector('.contact-form');
    contactForm.addEventListener('submit', (event) => {
        event.preventDefault(); // 阻止表单默认提交行为
        // 这里可以添加表单验证和AJAX提交逻辑
        const formData = new FormData(contactForm);
        console.log('表单数据已提交:', Object.fromEntries(formData));
        // 显示成功消息（简单示例）
        alert('感谢您的留言！我们会尽快与您联系。');
        contactForm.reset(); // 清空表单
    });
});

如何使用

  1. 创建文件：在您的项目文件夹中创建三个文件：index.html、style.css 和 script.js。
  2. 复制代码：将上面提供的代码分别粘贴到对应的文件中。
  3. 添加图片：
    • 英雄区域背景图：将 style.css 中 hero 类的 background-image URL 替换为您自己的图片路径，您也可以直接使用占位图 URL，或者将图片放在项目文件夹中并修改路径（url('images/hero-bg.jpg')）。
    • 关于我们图片：同样，将 about-image 中的 img 标签 src 属性 URL 替换为您自己的图片。
  4. ：修改 index.html 中的文本、Logo 和链接，使其符合您的需求。
  5. 打开预览：用浏览器打开 index.html 文件，您就可以看到效果了，尝试调整浏览器窗口大小，观察响应式布局的变化。

这个模板为您提供了一个坚实的基础,您可以在此基础上进行扩展和定制，例如添加更多页面、集成后端服务、添加动画效果等。

html5 css3单页面响应式模板
（图片来源网络，侵删）
html5 css3单页面响应式模板
（图片来源网络，侵删）