1. 响应式企业官网设计 (经典、实用,适合初学者到中级开发者)
  2. 单页应用式作品集/个人网站设计 (现代、互动性强,适合展示个人技能)

这两个方向都涵盖了网页设计的核心要素：布局、样式、交互和响应式,但侧重点和实现方式有所不同。

网页设计二合一案例教程
（图片来源网络，侵删）

网页设计二合一案例教程

引言：为什么选择“二合一”？

在网页开发中，没有“唯一正确”的答案，不同的项目需求催生了不同的设计模式和开发思路，通过这两个案例,你将学到：

  • 如何根据需求选择合适的设计模式（多页 vs. 单页）。
  • 掌握两种主流的布局技术（Flexbox 和 CSS Grid）。
  • 实现流畅的交互效果（导航栏、平滑滚动、动态内容）。
  • 确保在各种设备上都有出色的表现（响应式设计）。

响应式企业官网设计

这个案例将教你如何构建一个结构清晰、专业、适配各种屏幕的企业官网，我们将采用经典的“多页”结构,并通过导航链接跳转。

案例目标

  • 设计风格：简洁、专业、现代。
  • 核心页面：首页、关于我们、服务、联系我们。
  • 核心功能：
    • 顶部固定导航栏,在小屏幕上变为汉堡菜单。
    • 首页大图/视频背景。
    • 服务展示卡片。
    • 响应式页脚。
  • 技术栈：HTML5, CSS3 (Flexbox, Media Queries), 原生 JavaScript。

核心技术点

  • Flexbox：用于导航栏、卡片、页脚等一维布局。
  • CSS Grid：用于首页的复杂布局（如服务区域）。
  • 媒体查询：根据屏幕宽度（@media (max-width: 768px)）调整布局、字体大小和隐藏/显示元素。
  • position: sticky：实现导航栏滚动时固定在顶部的效果。
  • <picture>：为不同屏幕尺寸提供不同分辨率的图片,优化加载性能。

详细步骤

HTML 结构搭建

创建一个 index.html 文件，并搭建基础骨架，每个页面内容可以暂时放在一个 <section> 或 <div> 中，并用 CSS 控制显示（单页应用雏形），或者直接创建独立的 about.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="main-header">
        <nav class="navbar">
            <a href="index.html" class="logo">公司Logo</a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="services.html">服务</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
    <!-- 主要内容区域 -->
    <main>
        <!-- 首页英雄区 -->
        <section class="hero">
            <div class="hero-content">
                <h1>创新驱动未来</h1>
                <p>我们为您提供最前沿的解决方案</p>
                <a href="services.html" class="cta-button">了解更多</a>
            </div>
        </section>
        <!-- 服务展示区 -->
        <section class="services">
            <div class="container">
                <h2>我们的服务</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <img src="img/web-dev.jpg" alt="网站开发">
                        <h3>网站开发</h3>
                        <p>从概念到上线，打造专业、高效的网站。</p>
                    </div>
                    <div class="service-card">
                        <img src="img/ui-ux.jpg" alt="UI/UX设计">
                        <h3>UI/UX 设计</h3>
                        <p>以用户为中心，创造美观且易用的产品体验。</p>
                    </div>
                    <div class="service-card">
                        <img src="img/digital-marketing.jpg" alt="数字营销">
                        <h3>数字营销</h3>
                        <p>精准定位，提升品牌知名度和转化率。</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="main-footer">
        <p>&copy; 2025 您的公司名. 保留所有权利.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS 样式与响应式布局

创建 style.css 文件,逐步添加样式。

/* 全局样式和变量 */
:root {
    --primary-color: #007bff;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-bg: #f8f9fa;
}
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; /* 核心功能：固定导航 */
    top: 0;
    z-index: 1000;
}
.nav-links {
    display: flex;
    list-style: none;
}
.nav-links li a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
}
.nav-links li a:hover {
    color: var(--primary-color);
}
/* 汉堡菜单 (默认隐藏) */
.hamburger {
    display: none;
    cursor: pointer;
}
/* 英雄区样式 */
.hero {
    height: 100vh;
    background: url('img/hero-bg.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}
/* 服务卡片网格布局 */
.services-grid {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 核心功能：响应式网格 */
    gap: 2rem;
}
.service-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s;
}
.service-card:hover {
    transform: translateY(-10px);
}
/* ----------------- 响应式设计 ----------------- */
@media (max-width: 768px) {
    .nav-links {
        position: fixed; /* 移动端菜单覆盖全屏 */
        right: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
        padding: 2rem 0;
    }
    .nav-links.active { /* 点击汉堡菜单后显示 */
        right: 0;
    }
    .hamburger {
        display: block; /* 显示汉堡图标 */
    }
    .hero h1 {
        font-size: 2rem;
    }
}

JavaScript 交互

创建 script.js 文件,处理汉堡菜单的点击事件。

document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    hamburger.addEventListener('click', () => {
        // 切换 'active' 类来显示/隐藏菜单
        navLinks.classList.toggle('active');
        // 汉堡图标动画（可选）
        hamburger.classList.toggle('active');
    });
});

总结与拓展

  • 这个案例展示了如何使用 Flexbox 和 Grid 快速构建复杂的响应式布局，并通过媒体查询和 JavaScript 实现了移动端友好的交互。
  • 拓展：
    • 为 about.html, services.html 等页面创建一致的布局和样式。
    • 添加一个联系表单到 contact.html。
    • 使用 CSS 动画让页面元素在滚动时渐入。

单页应用式作品集/个人网站设计

这个案例将教你如何构建一个充满动感的个人作品集，所有内容都在一个页面上，通过点击导航平滑滚动到对应区域,而不是页面跳转。

案例目标

  • 设计风格：创意、动感、个性化。
  • 核心区块：首页/技能、项目展示、联系方式。
  • 核心功能：
    • 固定导航,点击后平滑滚动到对应区块。
    • 滚动时,导航链接高亮当前所在区域。
    • 项目展示采用卡片式布局,带有悬停效果。
    • 使用 CSS 动画和过渡效果增强视觉体验。

核心技术点

  • 单页 HTML 结构都在一个 index.html 文件中，用 <section> 分隔。
  • 锚点链接与 scrollIntoView()：实现平滑滚动。
  • Intersection Observer API：高级且高效的实现“滚动到视口时触发效果”的方式（如导航高亮、元素动画）。
  • CSS 动画：@keyframes、transition、transform。
  • CSS 变量：方便地管理和切换主题色。

详细步骤

HTML 结构（单页）

<!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="portfolio.css">
</head>
<body>
    <!-- 固定导航 -->
    <nav class="portfolio-nav">
        <a href="#home" class="nav-link">首页</a>
        <a href="#about" class="nav-link">lt;/a>
        <a href="#skills" class="nav-link">技能</a>
        <a href="#projects" class="nav-link">项目</a>
        <a href="#contact" class="nav-link">联系</a>
    </nav>
    <!-- 各个区块 -->
    <section id="home" class="section">
        <h1>你好，我是张三</h1>
        <p>一名充满激情的前端开发者</p>
    </section>
    <section id="about" class="section">
        <h2>关于我</h2>
        <p>这里是关于我的详细介绍...</p>
    </section>
    <section id="skills" class="section">
        <h2>我的技能</h2>
        <!-- 技能条 -->
    </section>
    <section id="projects" class="section">
        <h2>我的项目</h2>
        <div class="projects-grid">
            <!-- 项目卡片 -->
        </div>
    </section>
    <section id="contact" class="section">
        <h2>联系我</h2>
        <p>邮箱：zhangsan@example.com</p>
    </section>
    <script src="portfolio.js"></script>
</body>
</html>

CSS 样式

/* 全局样式 */
:root {
    --primary-color: #ff6b6b;
}
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    scroll-behavior: smooth; /* 简单的平滑滚动 */
}
/* 固定导航 */
.portfolio-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    z-index: 1000;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
.nav-link:hover, .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(255, 107, 107, 0.1);
}
/* 区块样式 */
.section {
    min-height: 100vh;
    padding: 5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#home {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
/* 项目网格 */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}
.project-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.project-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

JavaScript 交互（核心）

这是 SPA 的关键，使用 Intersection Observer 来实现导航高亮。

document.addEventListener('DOMContentLoaded', () => {
    const sections = document.querySelectorAll('.section');
    const navLinks = document.querySelectorAll('.nav-link');
    // 创建一个 Intersection Observer
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            // 如果区块进入视口
            if (entry.isIntersecting) {
                // 获取当前区块的 ID
                const id = entry.target.getAttribute('id');
                // 遍历所有导航链接，移除 'active' 类
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    // 如果链接的 href 匹配当前区块 ID，则添加 'active' 类
                    if (link.getAttribute('href').substring(1) === id) {
                        link.classList.add('active');
                    }
                });
            }
        });
    }, {
        // 当区块有 50% 进入视口时触发
        threshold: 0.5 
    });
    // 观察所有区块
    sections.forEach(section => {
        observer.observe(section);
    });
});

总结与拓展

  • 这个案例展示了如何利用现代浏览器 API (Intersection Observer) 创建流畅、高性能的单页应用体验,避免了传统锚点跳转的突兀感。
  • 拓展：
    • 为项目卡片添加“查看详情”弹窗。
    • 使用 GSAP 或 AOS (Animate On Scroll) 库实现更丰富的滚动动画。
    • 添加一个“返回顶部”按钮，同样使用 scrollIntoView({ behavior: 'smooth' }) 实现。

最终对比与选择

特性 响应式企业官网 单页应用作品集
设计模式 多页应用 单页应用
导航方式 页面跳转 页内锚点/平滑滚动
核心布局 Flexbox, CSS Grid Flexbox, CSS Grid
核心交互 汉堡菜单、响应式菜单 滚动监听、导航高亮
技术亮点 position: sticky, Media Queries Intersection Observer API, scroll-behavior
适用场景 内容相对独立、SEO要求高的网站 个人展示、创意项目、追求流畅体验的应用
SEO 优 (每个页面有独立 URL) 劣 (所有内容在一个 URL，内容不易被爬取)
用户体验 清晰、直接 流畅、沉浸感强

通过这两个案例的学习，你已经掌握了网页设计的两种主流范式，能够根据不同的项目需求做出明智的技术选择,并独立完成从构思到实现的全过程。