第26章 综合实战：响应式企业官网首页

全书知识点的大阅兵 ｜ 课型：实习课 ｜ 建议课时：4节

🏠 返回总目录 / 第26章

🎯 学习目标

知识目标

  • 掌握企业官网的需求分析方法
  • 综合运用语义化/Flex/Grid/响应式/JS交互
  • 掌握导航滚动变色与滚动显现的实现
  • 掌握项目复盘方法

能力目标

  • 能独立完成企业官网首页全流程开发
  • 能说出每个知识点在项目中的应用位置
  • 能按交付标准自查

德育目标

  • 培养全局观与系统思维
  • 体会"厚积薄发"——每章努力在此汇聚

教学重点

  • 语义化骨架设计
  • 导航变色+滚动显现交互
  • 全章知识映射复盘

教学难点

  • 多技术协同的组织
  • 细节品质：间距/层级/动效节奏

💻 实例演示1个实例 · 可在线运行

▶ 椰风工作室：企业官网首页

海南文旅题材完整官网：导航变色、滚动显现、响应式三栏——教材第26章完整实现。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，滚动页面观察导航变色与卡片显现
  2. 拖窄窗口验证移动端单栏
  3. 用开发者工具找到scrolled类的切换时机
  4. 修改滚动阈值60为200对比体验
  5. 完成知识映射表：每处效果对应教材哪一章
  6. Lighthouse跑分并记录

效果观察点

  • scroll事件+classList.toggle实现变色
  • IntersectionObserver比scroll监听高效
  • Grid三栏在768px断点变单栏
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>椰风工作室 | 海南文旅视觉设计</title>
<meta name="description" content="椰风工作室：专注海南文旅品牌的视觉设计与网站开发">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: "Microsoft YaHei", sans-serif; color: #1f2a33; }
  .navbar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
            align-items: center; padding: 18px 40px; transition: all .4s; z-index: 100; }
  .navbar.scrolled { background: rgba(14,42,60,.95); padding: 12px 40px; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
  .logo { color: #fff; font-size: 22px; font-weight: bold; text-decoration: none; }
  .logo span { color: #38d6c4; }
  nav ul { display: flex; gap: 28px; list-style: none; }
  nav a { color: #fff; text-decoration: none; transition: color .3s; }
  nav a:hover { color: #38d6c4; }
  .hero { min-height: 100vh; background: linear-gradient(135deg, #0e2a3c 0%, #1b5a7a 60%, #0f8c7f 100%);
          display: flex; flex-direction: column; justify-content: center; align-items: center;
          text-align: center; color: #fff; padding: 20px; }
  .hero h1 { font-size: 48px; margin-bottom: 16px; letter-spacing: 2px; }
  .hero p { font-size: 18px; color: #b8d8e4; margin-bottom: 30px; }
  .btn { background: #38d6c4; color: #0e2a3c; padding: 14px 40px; border-radius: 30px;
         text-decoration: none; font-weight: bold; transition: transform .3s; }
  .btn:hover { transform: scale(1.06); }
  section { padding: 90px 40px; max-width: 1100px; margin: 0 auto; }
  h2 { text-align: center; font-size: 32px; color: #123a52; margin-bottom: 40px; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card { background: #f7fafb; border-radius: 14px; padding: 30px; transition: all .4s;
          opacity: 0; transform: translateY(30px); }
  .card.show { opacity: 1; transform: translateY(0); }
  .card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(18,58,82,.12); }
  .card h3 { color: #0f8c7f; margin-bottom: 10px; }
  footer { background: #0e2a3c; color: #7fa8bc; text-align: center; padding: 30px; }
  @media (max-width: 768px) {
    .cards { grid-template-columns: 1fr; }
    .hero h1 { font-size: 30px; }
    .navbar { padding: 14px 20px; }
  }
</style>
</head>
<body>
  <header class="navbar" id="navbar">
    <a class="logo" href="#top">椰风<span>工作室</span></a>
    <nav aria-label="主导航"><ul>
      <li><a href="#services">服务</a></li>
      <li><a href="#works">作品</a></li>
      <li><a href="#contact">联系</a></li>
    </ul></nav>
  </header>
  <main id="top">
    <section class="hero">
      <h1>把海南的美，讲给世界听</h1>
      <p>文旅品牌视觉设计 · 网站开发 · 世赛获奖团队</p>
      <a class="btn" href="#contact">开始合作</a>
    </section>
    <section class="services" id="services">
      <h2>我们的服务</h2>
      <div class="cards">
        <article class="card"><h3>品牌设计</h3><p>LOGO、VI与视觉系统，讲好品牌故事。</p></article>
        <article class="card"><h3>网站开发</h3><p>响应式官网与小程序页面，性能与美感兼得。</p></article>
        <article class="card"><h3>竞赛培训</h3><p>世赛网站设计与开发项目集训，冠军教练团队。</p></article>
      </div>
    </section>
    <section id="works">
      <h2>精选案例</h2>
      <div class="cards">
        <article class="card"><h3>三亚湾文旅</h3><p>城市文旅官网，上线三个月流量增长240%。</p></article>
        <article class="card"><h3>黎锦文化</h3><p>非遗数字展厅，获省级文化项目支持。</p></article>
        <article class="card"><h3>海岛民宿</h3><p>预订系统前端，转化率提升35%。</p></article>
      </div>
    </section>
    <section id="contact">
      <h2>联系我们</h2>
      <p style="text-align:center">邮箱：hello@yefeng.example · 地址：海南省三亚市</p>
    </section>
  </main>
  <footer>© 2026 椰风工作室 · 琼ICP备00000000号</footer>
<script>
  const navbar = document.getElementById('navbar');
  addEventListener('scroll', () => navbar.classList.toggle('scrolled', scrollY > 60));
  const io = new IntersectionObserver(es => es.forEach(e => {
    if (e.isIntersecting) { e.target.classList.add('show'); io.unobserve(e.target); }
  }), { threshold: 0.15 });
  document.querySelectorAll('.card').forEach(el => io.observe(el));
</script>
</body>
</html>

📋 实习任务书

任务目标：独立完成企业官网首页并完成知识复盘

任务内容与评分
任务1：画出官网信息架构图（10分）
任务2：完成语义化HTML骨架（20分）
任务3：完成CSS样式与响应式（30分）
任务4：实现导航变色+滚动显现（20分）
任务5：填写知识映射表并Lighthouse跑分（20分）

自我评价

📚 课后作业与预习