企业官网建设流程全解析

简介：这是一份面向前端初学者与个人设计师的HTML+CSS+JavaScript全栈式作品集源码，旨在帮助用户快速搭建专业、响应式的在线作品展示平台，解决个人品牌建设与求职作品呈现的实际需求。资源包共51个文件，含12个HTML页面（覆盖首页、作品页、404页等完整导航结构）、10个JS脚本（集成lazyload图片懒加载、tocbot目录生成、busuanzi访问统计及交互动画等实用功能）、4个CSS样式表（含自定义主题与图标字体支持）、以及JPG/PNG封面图、SVG图标、remixicon字体族（EOT/TTF/WOFF/WOFF2）和鼠标光标等视觉资源，整体压缩包仅4.13MB，轻量易部署。已有114人学习下载，资源结构清晰：js/、css/、images/、fonts/等目录划分明确，dist目录预留构建输出位，archives与2024子目录体现版本管理意识，配套readme.txt提供基础说明，可直接运行、二次开发或拆解学习现代静态站点组织范式。

1. 项目概述：为什么你需要一个“活”的个人作品集？

在数字身份日益重要的今天，一个静态的PDF简历或一个简单的作品链接列表，已经很难让你在众多求职者或自由职业者中脱颖而出。我见过太多优秀的开发者、设计师，他们的作品本身很硬核，但展示方式却停留在“石器时代”——要么是压缩包里的几张截图，要么是托管在第三方平台、风格千篇一律的页面。这就像一位米其林大厨用一次性饭盒装盘，手艺再好，第一印象也打了折扣。

“基于HTML、JavaScript、CSS的个人作品集设计源码”这个项目，核心解决的正是这个问题。它不是一个教你如何写代码的初级教程，而是一套完整的、可深度定制的前端工程化实践方案。它的目标，是让你亲手打造一个完全属于自己、能动态交互、且技术栈纯粹的线上名片。为什么不用现成的模板或建站工具？因为控制权。当你亲手编写每一行HTML结构、用CSS赋予它灵魂、用JavaScript注入交互逻辑时，你不仅是在展示作品，更是在展示你的工程能力、审美品味和对细节的掌控力。这份源码，就是你的作品之一，它本身就在无声地讲述你的故事。

这个项目适合所有需要展示数字成果的人：前端开发者自不必说，UI/UX设计师、插画师、摄影师、甚至内容创作者和产品经理，都可以通过它来构建一个专业、中心化的展示门户。它不依赖复杂的后端或数据库，仅凭前端三剑客（HTML、CSS、JS）就能实现丰富的效果，部署成本极低，一个GitHub Pages或任何静态托管服务就能让它全球可访问。

2. 整体架构设计与核心思路拆解

一个优秀的个人作品集网站，远不止是把内容堆上去那么简单。它需要清晰的信息架构、流畅的用户体验和独特的视觉风格。在动手写代码之前，我们必须先想清楚整体设计思路。

2.1 信息架构：如何组织你的内容？

你的作品集是给谁看的？招聘经理、潜在客户还是同行？不同的观众关注点不同，但核心路径是相似的：快速了解你是谁 -> 看到你的能力证明 -> 方便地联系你。因此，一个经典的信息架构通常包含以下模块：

1. 导航栏：固定或响应式，清晰标注核心板块（关于我、作品集、技能、联系）。
2. 英雄区域：首屏核心视觉区，用一句有力的标语、你的姓名和职位快速建立印象。
3. 关于我：简短有力的个人介绍，突出你的专业领域、热情和独特价值。
4. 作品集展示：核心中的核心。需要精心设计展示形式（网格、瀑布流、轮播）和过滤/分类功能。
5. 技能/工具栈：用图标或进度条等形式可视化你的技术能力。
6. 联系表单/信息：提供电子邮件、社交媒体链接，或一个简单的联系表单。
7. 页脚：版权信息、再次放置关键社交链接。

在技术实现上，我们会采用单页面应用的设计模式。这并不是说我们要用React或Vue，而是通过原生的JavaScript动态加载内容或平滑滚动到锚点，让整个浏览过程无刷新、更流畅。所有内容都在一个index.html中通过不同的<section>划分，通过CSS和JS来控制显示与交互。

2.2 技术选型：为什么坚持原生三件套？

市面上有无数框架（React, Vue, Svelte）和静态站点生成器（Gatsby, Hugo, Jekyll）。但对于个人作品集这个场景，我强烈建议从原生技术栈开始，原因有三：

• 零依赖与极致性能：没有庞大的node_modules，没有复杂的构建流程。页面加载速度极快，对SEO友好，也让你对最终产出的每一字节都了然于胸。
• 深入理解Web基石：在框架的抽象层之上工作久了，容易忘记底层是如何运作的。亲手用原生JS操作DOM、用纯CSS实现复杂布局，是对基础能力最好的锤炼和证明。
• 无痛部署与无限可控：生成的是一堆纯粹的静态文件（HTML, CSS, JS, 图片），可以扔到任何支持HTTP服务的地方：Netlify, Vercel, GitHub Pages，甚至你自己的NAS。没有运行时环境兼容性问题。

当然，这并不意味着我们就要用最原始的方式。我们会采用一些现代的前端开发实践，比如使用CSS变量（Custom Properties）来管理主题色，使用ES6+的模块化JavaScript来组织代码，让项目结构保持清晰可维护。

2.3 视觉与交互设计原则

在开始写CSS之前，先定下设计基调：

• 一致性：确立一套颜色方案（主色、辅助色、背景色、文字色）、字体组合（通常一个无衬线体用于正文，一个衬线体或特殊字体用于标题）和间距系统（如使用8px基准）。这能快速建立专业感。
• 层次感：通过字体大小、粗细、颜色和间距，清晰地区分信息层级。让用户的视线能自然流动。
• 留白：不要害怕留白。充足的留白能让内容呼吸，提升可读性和高级感。
• 微交互：这是JavaScript的用武之地。按钮的悬停效果、卡片翻转、平滑滚动、懒加载图片，这些细微的动画能极大提升用户体验的精致度。

3. 核心模块实现与代码解析

接下来，我们进入实战环节，拆解几个最关键模块的实现。我会提供核心代码片段并解释其背后的设计逻辑。

3.1 响应式导航栏的实现

导航栏是网站的“中枢神经”，必须在所有设备上都能良好工作。我们将实现一个在桌面端水平排列，在移动端折叠为汉堡菜单的响应式导航。

HTML结构：

<header class="site-header"> <nav class="navbar"> <a href="#" class="logo">YourName</a> <button class="menu-toggle" aria-label="Toggle navigation" aria-expanded="false"> <span class="hamburger"></span> </button> <ul class="nav-menu"> <li class="nav-item"><a href="#home" class="nav-link">首页</a></li> <li class="nav-item"><a href="#about" class="nav-link">关于</a></li> <li class="nav-item"><a href="#portfolio" class="nav-link">作品集</a></li> <li class="nav-item"><a href="#contact" class="nav-link">联系</a></li> </ul> </nav> </header>

这里有几个关键点：1) 使用<nav>语义化标签。2) 为汉堡按钮添加了aria-label和aria-expanded属性，这对屏幕阅读器等辅助技术至关重要，是专业前端必须考虑的可访问性细节。3) 链接使用锚点（#home）为单页平滑滚动做准备。

CSS核心样式：

/* 基础样式 */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background-color: var(--bg-color); position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s ease; } .nav-link:hover { color: var(--primary-color); } /* 汉堡按钮 - 默认隐藏 */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } .hamburger { display: block; width: 25px; height: 3px; background-color: var(--text-color); position: relative; transition: background-color 0.3s ease; } .hamburger::before, .hamburger::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: inherit; left: 0; transition: transform 0.3s ease; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } /* 响应式设计 - 移动端 */ @media (max-width: 768px) { .menu-toggle { display: block; } .nav-menu { position: fixed; left: -100%; top: 70px; /* 根据导航栏高度调整 */ flex-direction: column; background-color: var(--bg-color); width: 100%; text-align: center; transition: left 0.5s ease; padding: 2rem 0; gap: 1.5rem; box-shadow: 0 10px 15px rgba(0,0,0,0.1); } .nav-menu.active { left: 0; } /* 汉堡按钮动画 - 点击后变成X */ .menu-toggle[aria-expanded="true"] .hamburger { background-color: transparent; } .menu-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg) translate(5px, 8px); } .menu-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg) translate(5px, -8px); } }

注意：这里使用了CSS自定义属性（--bg-color,--text-color等），这需要在:root选择器中提前定义。这样做的好处是，如果你想切换深色/浅色主题，只需要修改这几个变量的值，所有相关元素都会自动更新，维护性极佳。

JavaScript交互逻辑：

document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const navMenu = document.querySelector('.nav-menu'); menuToggle.addEventListener('click', function() { const isExpanded = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', !isExpanded); navMenu.classList.toggle('active'); }); // 点击导航链接后，在移动端自动关闭菜单 const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', () => { if (window.innerWidth <= 768) { menuToggle.setAttribute('aria-expanded', 'false'); navMenu.classList.remove('active'); } }); }); });

这段JS代码做了三件事：1) 监听汉堡按钮的点击事件。2) 切换按钮的aria-expanded状态（可访问性）和菜单的active类。3) 在移动端点击链接后自动收起菜单，提升用户体验。

3.2 作品集画廊的动态展示与过滤

作品集模块是重中之重。我们将实现一个网格布局的画廊，并添加基于分类（如“网页设计”、“移动应用”、“品牌设计”）的过滤功能。

HTML结构：

<section id="portfolio" class="portfolio-section"> <h2>我的作品</h2> <div class="filter-buttons"> <button class="filter-btn active">.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .portfolio-item { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .portfolio-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); } .portfolio-item img { width: 100%; height: 250px; object-fit: cover; /* 关键！保证图片按比例裁剪填充 */ display: block; transition: transform 0.5s ease; } .portfolio-item:hover img { transform: scale(1.05); } .item-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; padding: 2rem 1.5rem 1.5rem; transform: translateY(100%); transition: transform 0.5s ease; } .portfolio-item:hover .item-overlay { transform: translateY(0); }

这里使用了CSS Grid的auto-fill和minmax()函数，创建了一个响应式网格，列数会根据容器宽度自动调整，但每列宽度至少300px。.item-overlay的初始位置在卡片下方（translateY(100%)），悬停时滑上来，这是一种比单纯改变透明度更高级的交互反馈。

JavaScript过滤功能：

document.addEventListener('DOMContentLoaded', function() { const filterButtons = document.querySelectorAll('.filter-btn'); const portfolioItems = document.querySelectorAll('.portfolio-item'); filterButtons.forEach(button => { button.addEventListener('click', function() { // 1. 更新按钮激活状态 filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); // 2. 获取过滤条件 const filterValue = this.getAttribute('data-filter'); // 3. 遍历所有作品项 portfolioItems.forEach(item => { const category = item.getAttribute('data-category'); // 4. 判断是否显示 if (filterValue === 'all' || category === filterValue) { item.style.display = 'block'; // 添加一个简单的淡入动画 setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 10); // 微小延迟确保display先改变 } else { item.style.opacity = '0'; item.style.transform = 'scale(0.8)'; // 等待过渡动画完成后隐藏，避免突兀消失 setTimeout(() => { item.style.display = 'none'; }, 300); } }); }); }); });

这个过滤逻辑清晰易懂：点击按钮 -> 获取过滤值 -> 遍历所有作品 -> 根据>// 为所有锚点链接添加平滑滚动 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认跳转 const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, // 减去固定导航栏高度 behavior: 'smooth' // 关键！启用原生平滑滚动 }); } }); });

这里使用了原生的window.scrollTo方法并传入{behavior: 'smooth'}选项，现代浏览器都支持，效果流畅且无需额外库。减去导航栏高度是为了避免锚点被导航栏遮挡。

滚动监听与导航高亮：

// 获取所有章节和导航链接 const sections = document.querySelectorAll('section[id]'); const navLinks = document.querySelectorAll('.nav-link'); // 监听滚动事件 window.addEventListener('scroll', function() { let current = ''; const scrollPosition = window.scrollY + 100; // 加一个偏移量，提前触发高亮 // 找出当前视口最顶部的章节 sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { current = section.getAttribute('id'); } }); // 更新导航链接的激活状态 navLinks.forEach(link => { link.classList.remove('active'); const href = link.getAttribute('href'); if (href === `#${current}`) { link.classList.add('active'); } }); });

在CSS中，我们需要为.nav-link.active定义一个样式，比如改变颜色或添加下划线。这个实现的关键在于计算滚动位置和每个章节的位置关系。window.scrollY是当前滚动距离，加上一个偏移量（如100px）可以让高亮切换更符合视觉直觉——当章节标题接近视口顶部时，导航项就高亮。

4. 性能优化与最佳实践

一个作品集网站，性能本身就是作品质量的一部分。加载缓慢的网站会直接劝退访客。以下是几个必须实施的优化点。

4.1 图片优化：速度与质量的平衡

图片通常是网站最大的资源。务必做到：

• 格式选择：使用现代格式如WebP，它比JPEG和PNG有更好的压缩率。通过<picture>元素提供回退方案。

  <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="描述"> </picture>

• 尺寸适配：不要用3000px的大图显示在300px的缩略图里。使用图像编辑工具或构建工具生成多尺寸版本，并结合srcset属性让浏览器选择最合适的一张。

  <img src="project-small.jpg" srcset="project-small.jpg 500w, project-medium.jpg 1000w, project-large.jpg 2000w" sizes="(max-width: 768px) 100vw, 50vw" alt="项目展示" loading="lazy">

• 懒加载：如前所述，为所有非首屏图片添加loading="lazy"属性。

4.2 CSS与JavaScript的组织与优化

• CSS策略：
  • 避免深层嵌套：过深的CSS选择器（如.header .nav .list .item a）会增加匹配成本，影响渲染性能。尽量保持扁平。
  • 使用Flexbox/Grid布局：它们比传统的浮动或定位布局更高效，渲染性能更好。
  • 压缩与合并：上线前，使用工具（如CSSNano, PurgeCSS）压缩CSS代码，移除未使用的样式和空白字符。
• JavaScript策略：
  • 将脚本放在底部：或使用defer属性，确保不阻塞HTML和CSS的解析与渲染。

  <script src="main.js" defer></script>

  • 事件委托：如果你有很多相似元素的监听器（比如作品集的每个卡片），不要在循环中为每个元素单独绑定，而是绑定到其父元素上，利用事件冒泡机制。

  // 不好的做法 document.querySelectorAll('.card').forEach(card => { card.addEventListener('click', handleClick); }); // 好的做法 - 事件委托 document.querySelector('.portfolio-grid').addEventListener('click', function(e) { if (e.target.closest('.card')) { handleClick(e); } });

4.3 部署前检查清单

在将你的作品集发布到网上之前，请务必运行以下检查：

1. 响应式测试：使用浏览器开发者工具的设备模拟器，测试从手机（320px）到超大桌面（1920px+）的各种尺寸。检查布局是否错乱、文字是否可读。
2. 浏览器兼容性：至少在Chrome、Firefox、Safari的最新版本上测试。检查你使用的CSS属性（如Grid,gap）和JS API（如scrollTowith behavior）的兼容性。可以使用Can I Use网站查询。
3. 性能审计：使用Google Chrome的Lighthouse工具（开发者工具中的Lighthouse面板）生成报告。重点关注性能（Performance）、可访问性（Accessibility）、最佳实践（Best Practices）和SEO四项得分，并按照建议进行优化。
4. 可访问性检查：
   • 所有图片是否有有意义的alt属性？
   • 颜色对比度是否足够（WCAG AA标准）？可以使用浏览器插件检查。
   • 是否可以通过键盘（Tab键）导航所有交互元素？
   • 是否为所有交互元素（如按钮、链接）提供了清晰的焦点状态（:focus样式）？
5. SEO基础：确保<head>中有正确的<title>和<meta name="description">。使用语义化HTML标签（<header>,<nav>,<main>,<section>,<article>,<footer>）。

5. 从项目到作品：如何让你的源码脱颖而出

当你完成了基础框架，如何让它从“又一个作品集模板”变成令人印象深刻的个人作品？关键在于注入你的个性与巧思。

5.1 添加有特色的交互细节

• 自定义光标：这能立刻提升网站的独特感。你可以用CSS和JS将默认箭头换成一个小圆点，并让它带有跟随延迟或交互反馈。

  * { cursor: none; /* 隐藏默认光标 */ } .custom-cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--primary-color); border-radius: 50%; pointer-events: none; z-index: 9999; transition: transform 0.2s ease, background-color 0.3s ease; } .custom-cursor.hover { transform: scale(1.5); background-color: rgba(var(--primary-color-rgb), 0.2); }

  // 创建并跟踪自定义光标 const cursor = document.createElement('div'); cursor.classList.add('custom-cursor'); document.body.appendChild(cursor); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); // 为可交互元素添加悬停效果 const interactiveEls = document.querySelectorAll('a, button, .portfolio-item'); interactiveEls.forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });

• 视差滚动效果：让背景或某些元素以不同于页面的速度滚动，营造深度感。可以通过监听scroll事件，改变元素的transform: translateY值来实现。
• 微妙的页面过渡：当点击过滤按钮或导航到新“页面”（实际上是锚点）时，可以添加一个全局的淡入淡出或滑动过渡效果，让体验更连贯。

5.2 设计深色/浅色主题切换

这是一个非常受欢迎且能体现技术细节的功能。核心是利用CSS变量和一点JavaScript。

1. 在CSS中定义两套变量：

   :root { --bg-color: #ffffff; --text-color: #333333; --primary-color: #007bff; /* ... 其他变量 */ } [data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #f0f0f0; --primary-color: #66b3ff; /* ... 对应深色变量 */ } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.5s ease, color 0.5s ease; }

2. 添加一个切换按钮：

   <button id="theme-toggle" aria-label="切换深色/浅色模式">🌓</button>

3. 用JavaScript控制切换：

   const themeToggle = document.getElementById('theme-toggle'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); // 读取本地存储的偏好 const currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light'); if (currentTheme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); } themeToggle.addEventListener('click', function() { let theme = 'light'; if (document.documentElement.getAttribute('data-theme') !== 'dark') { theme = 'dark'; } document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('theme', theme); // 保存到本地存储 });

   这里还考虑了用户的系统主题偏好（prefers-color-scheme）并使用了localStorage来记住用户的选择，细节满满。

5.3 将源码本身变为展示的一部分

在你的作品集网站上，可以专门设立一个“关于本网站”的板块，用来说明你构建这个网站时用到的技术、遇到的挑战和解决的方案。这本身就是一份绝佳的“元作品”。你可以谈论：

• 为什么选择纯原生技术栈。
• 在实现某个复杂交互（比如自定义光标或过滤动画）时遇到的坑和解决方案。
• 你是如何进行性能优化的（比如图片处理、代码分割的思考）。
• 你对可访问性的考量。

这不仅能展示你的技术能力，更能体现你的思考过程和工匠精神，这远比罗列技术名词更有说服力。

6. 常见问题与调试实录

在实际开发中，你几乎一定会遇到下面这些问题。这里是我踩过坑后总结的解决方案。

6.1 布局错乱与CSS调试技巧

• 问题：元素不按预期排列，或者在某些屏幕尺寸下布局崩塌。
• 排查：
  1. 盒模型检查：使用开发者工具的“元素检查”，仔细查看元素的width、height、padding、margin、border。是否因为box-sizing没设置为border-box导致计算宽度超出预期？
  2. Flexbox/Grid检查：对于Flex容器，检查justify-content和align-items的值。对于Grid，检查grid-template-columns的定义是否正确，特别是使用fr单位或auto-fill时。
  3. 媒体查询断点：确认你的媒体查询（@media）的断点设置是否合理，并且CSS规则的覆盖顺序是否正确。后定义的规则会覆盖先定义的。
• 心得：我习惯在调试时，给疑似有问题的元素临时加上一个醒目的边框，比如border: 2px solid red !important;，这能瞬间看清它的实际占据空间。

6.2 JavaScript交互失效

• 问题：点击按钮没反应，事件监听器似乎没绑定上。
• 排查：
  1. 执行时机：你的JS代码是否在DOM元素加载完成之前就执行了？确保将<script>标签放在<body>末尾，或者用DOMContentLoaded事件包裹。
  2. 选择器错误：document.querySelector获取到的元素是否为null？在控制台打印一下看看。检查选择器字符串是否正确，特别是类和ID的拼写。
  3. 事件冒泡与委托：如果你使用了事件委托，确保事件处理函数中的条件判断（e.target.closest(‘.your-class’)）能正确匹配到目标元素。
• 心得：养成在事件处理函数开头加一句console.log(‘Event fired on’, e.target)的习惯，这是最简单的调试方法。另外，善用浏览器的“事件监听器”检查面板（在元素检查的“Event Listeners”标签页），可以看到元素上绑定了哪些事件。

6.3 移动端触摸体验不佳

• 问题：在手机上，按钮点击区域太小，滚动卡顿，或者有奇怪的300毫秒点击延迟。
• 解决方案：
  1. 点击区域：确保按钮和可点击链接有足够大的尺寸和间距。CSS的padding比单纯增大width/height更有效。建议最小点击区域为44x44像素。
  2. 消除点击延迟：在<head>中添加以下<meta>标签可以消除移动浏览器上为了区分“点击”和“双击缩放”而引入的延迟。

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     对于自定义的点击交互，可以考虑使用touchstart事件代替click，但要小心处理滚动冲突。
  3. 滚动流畅：为可滚动区域（如整个页面或某个容器）添加-webkit-overflow-scrolling: touch;CSS属性可以启用iOS上的弹性滚动，体验更顺滑。

6.4 部署后资源加载失败（404错误）

• 问题：本地运行一切正常，但上传到服务器后，图片、CSS或JS文件加载不出来。
• 排查：
  1. 路径问题（最常见）：这是绝对路径与相对路径的坑。如果你的网站部署在子目录（如username.github.io/repo-name/），那么像href=“/style.css”这样的绝对路径就会指向根目录，从而出错。
     • 解决方案：使用相对路径。如果所有资源都在同一目录，直接写href=“style.css”。如果结构复杂，可以考虑使用基路径<base href=“./”>，但需谨慎。
  2. 文件名大小写：有些服务器（如Linux）是严格区分大小写的，而本地开发环境（如Windows）可能不区分。确保代码中的引用和实际文件名完全一致。
  3. 缓存：浏览器可能缓存了旧的HTML文件，但你的资源文件已经更新。在开发阶段，可以打开开发者工具的“网络”面板，勾选“禁用缓存”。上线后，可以通过给资源文件名添加哈希后缀（如style.a1b2c3.css）来强制更新。

构建个人作品集的过程，是一个将技术、设计和表达融合一体的创造性项目。它没有唯一的正确答案，但有一个共同的目标：真实、清晰、有吸引力地展示最好的你。从一行HTML开始，到一次次调试优化，最终将它部署到互联网的某个角落，这个过程本身，就是一份值得放入作品集的宝贵经历。

本文还有配套的精品资源，点击获取