html5动态网页模板-网页设计-锦华智联科技

模板概览

这个模板将包含以下特性：

（图片来源网络，侵删）

响应式布局：适配桌面、平板和手机。
语义化 HTML5：使用 <header>, <nav>, <main>, <section>, <article>, <footer> 等标签，提升可读性和 SEO。
动态交互：
- 响应式导航菜单：在移动端会变成汉堡菜单。
- 图片轮播图：自动播放，可手动切换。
- 平滑滚动：点击导航链接平滑滚动到对应区域。
- 返回顶部按钮：滚动一定距离后显示。
现代 CSS3：
- Flexbox 布局。
- 动画和过渡效果。
- 媒体查询实现响应式设计。
原生 JavaScript：不依赖任何外部库，轻量且高效。

第一步：文件结构

创建一个项目文件夹,并在其中创建以下文件：

my-website/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

第二步：HTML 代码 (`index.html`)

这是网页的骨架,我们使用 HTML5 语义化标签来构建页面结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个使用 HTML5, CSS3 和 JavaScript 构建的现代化动态网页模板。">HTML5 动态网页模板</title>
    <!-- 引入 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 页头 -->
    <header id="header">
        <div class="container">
            <a href="#" class="logo">我的Logo</a>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home" class="nav-link">首页</a></li>
                    <li><a href="#about" class="nav-link">lt;/a></li>
                    <li><a href="#services" class="nav-link">服务</a></li>
                    <li><a href="#contact" class="nav-link">联系</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 和 JavaScript 动态效果的模板。</p>
                <a href="#about" class="cta-button">了解更多</a>
            </div>
        </section>
        <!-- 关于部分 -->
        <section id="about">
            <div class="container">
                <h2>关于我们</h2>
                <p>这里是关于我们的介绍内容，你可以在这里放置你的公司或个人简介。</p>
            </div>
        </section>
        <!-- 服务部分 -->
        <section id="services">
            <div class="container">
                <h2>我们的服务</h2>
                <div class="services-grid">
                    <article class="service-card">
                        <i class="fas fa-code"></i>
                        <h3>网页开发</h3>
                        <p>提供专业的网页设计与开发服务。</p>
                    </article>
                    <article class="service-card">
                        <i class="fas fa-mobile-alt"></i>
                        <h3>移动应用</h3>
                        <p>开发高性能的移动应用程序。</p>
                    </article>
                    <article class="service-card">
                        <i class="fas fa-chart-line"></i>
                        <h3>UI/UX 设计</h3>
                        <p>创造美观且用户友好的界面。</p>
                    </article>
                </div>
            </div>
        </section>
        <!-- 联系部分 -->
        <section id="contact">
            <div class="container">
                <h2>联系我们</h2>
                <p>有任何问题或合作意向，请随时与我们联系。</p>
                <form action="#">
                    <input type="text" placeholder="您的名字" required>
                    <input type="email" placeholder="您的邮箱" required>
                    <textarea placeholder="您的留言" rows="5" required></textarea>
                    <button type="submit" class="cta-button">发送消息</button>
                </form>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 我的公司. 保留所有权利.</p>
        </div>
    </footer>
    <!-- 返回顶部按钮 -->
    <a href="#" id="back-to-top" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </a>
    <!-- 引入 JavaScript 文件 -->
    <script src="js/script.js"></script>
</body>
</html>

第三步：CSS 代码 (`css/style.css`)

这是网页的样式,负责布局、颜色、字体和动画。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --text-color: #333;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; /* 平滑滚动 */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
/* --- 页头和导航 --- */
#header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 20px;
}
.main-nav ul li a {
    color: var(--dark-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
.main-nav ul li a:hover {
    color: var(--primary-color);
}
/* 汉堡菜单 */
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    margin: 5px 0;
    transition: 0.3s;
}
/* --- 主要内容区域 --- */
main {
    margin-top: 80px; /* 为固定导航栏留出空间 */
}
/* Hero 部分 */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/random/1600x900?technology') no-repeat center center/cover;
    color: #fff;
}
.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
/* 服务网格 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}
.service-card {
    background-color: #f4f4f4;
    padding: 2rem;
    text-align: center;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.service-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
/* 表单样式 */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 2rem auto 0;
}
input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}
/* 页脚 */
footer {
    background-color: var(--dark-color);
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}
/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .main-nav {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding: 2rem 0;
    }
    .main-nav.active {
        left: 0;
    }
    .main-nav ul {
        flex-direction: column;
    }
    .main-nav ul li {
        margin: 15px 0;
    }
    .hamburger {
        display: block;
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .hero h1 {
        font-size: 2rem;
    }
}

第四步：JavaScript 代码 (`js/script.js`)

这是让网页“动”起来的关键，处理用户交互和动态效果。

（图片来源网络，侵删）

// 等待整个 DOM 加载完毕
document.addEventListener('DOMContentLoaded', () => {
    // --- 1. 汉堡菜单功能 ---
    const hamburger = document.querySelector('.hamburger');
    const mainNav = document.querySelector('.main-nav');
    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        mainNav.classList.toggle('active');
    });
    // 点击导航链接后关闭菜单 (移动端)
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            hamburger.classList.remove('active');
            mainNav.classList.remove('active');
        });
    });
    // --- 2. 返回顶部按钮功能 ---
    const backToTopButton = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
        // 如果页面滚动超过 300px，显示按钮
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('visible');
        } else {
            backToTopButton.classList.remove('visible');
        }
    });
    backToTopButton.addEventListener('click', (e) => {
        e.preventDefault();
        // 使用平滑滚动回到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    // --- 3. 导航栏高亮当前部分 (可选，但很酷) ---
    const sections = document.querySelectorAll('section[id]');
    const navLi = document.querySelectorAll('.main-nav ul li a');
    window.addEventListener('scroll', () => {
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (pageYOffset >= sectionTop - 200) {
                current = section.getAttribute('id');
            }
        });
        navLi.forEach(li => {
            li.classList.remove('active');
            if (li.getAttribute('href').slice(1) === current) {
                li.classList.add('active');
            }
        });
    });
    // --- 4. 表单提交处理 (示例) ---
    const contactForm = document.querySelector('form');
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault(); // 阻止默认的表单提交行为
        // 这里可以添加表单验证和 AJAX 提交逻辑
        const formData = new FormData(contactForm);
        console.log('表单数据已提交:', Object.fromEntries(formData));
        // 显示一个成功提示
        alert('感谢您的留言！我们会尽快与您联系。');
        // 清空表单
        contactForm.reset();
    });
});

如何使用这个模板

保存文件：将上面的代码分别复制到 index.html, css/style.css, 和 js/script.js 文件中。
运行：直接用浏览器打开 index.html 文件即可看到效果。
自定义：
- Logo 和文字：在 index.html 中修改 <a href="#" class="logo">我的Logo</a> 和其他所有文本内容。
- 图片：替换 hero 部分的 url('https://...') 为你自己的图片路径。
- 颜色：在 css/style.css 的 root 部分修改 CSS 变量来改变网站的主题色。
- 功能：在 js/script.js 中可以添加更多动态功能，比如图片轮播、数据加载等。

这个模板是一个功能完整、结构清晰的起点，您可以根据自己的需求进行扩展和修改，祝您编码愉快！

html5动态网页模板

模板概览

第一步：文件结构

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

第三步：CSS 代码 (css/style.css)

第四步：JavaScript 代码 (js/script.js)

如何使用这个模板

第二步：HTML 代码 (`index.html`)

第三步：CSS 代码 (`css/style.css`)

第四步：JavaScript 代码 (`js/script.js`)