HTML与CSS实战：从零到一构建响应式个人作品集网页（一）

个人作品集网站是展示你作品和技能的重要窗口。通过自己动手使用 HTML 和 CSS 构建一个响应式的作品集网页，不仅可以提升你的前端开发能力，还能让你的网站独一无二、专业大气。本文将以科普+教程的形式，循序渐进地介绍如何从零开始制作一个响应式个人作品集网站。

响应式网页设计简介

响应式网页设计（Responsive Web Design, RWD）是一种让网页能够根据用户设备屏幕大小和分辨率自动调整布局和外观的设计方法。简而言之，就是“一次设计，适配所有设备”。通过响应式设计，网页在桌面电脑、笔记本、平板和手机等不同尺寸的屏幕上都能良好显示，用户体验一致。

智能手机、平板、笔记本和桌面显示器上的网页，展示响应式设计

响应式设计的三大关键技术：

弹性网格布局（Fluid Grids）：使用百分比或相对单位（如em、rem）而非固定像素来定义容器和元素的尺寸，使布局能够随视口宽度伸缩。例如，将容器宽度设为80%而不是固定的800px，这样容器会随浏览器窗口大小变化。弹性网格确保内容不会溢出容器，也不会在大屏幕上留有过多空白。
弹性图片和媒体（Flexible Images/Media）：确保图片、视频等媒体资源可以根据容器大小缩放。常用的做法是将图片的max-width设为100%，这样图片在容器变窄时会缩小以适应，但不会超过其原始尺寸。这避免了小容器中图片过大导致溢出，也防止图片在大容器中被过度放大而失真。
媒体查询（Media Queries）：通过 CSS 的@media规则，根据设备的屏幕宽度、高度、方向等条件应用不同的样式。媒体查询是响应式设计的核心工具，它允许我们在不同的断点（breakpoint）处调整布局，例如在小屏幕上隐藏某些元素或改变元素排列方式。媒体查询的出现使得过去需要借助 JavaScript 才能实现的布局切换，现在仅用 CSS 即可完成。

除了上述三大技术，现代 CSS 还提供了弹性盒布局（Flexbox）和网格布局（Grid）等强大的布局方式，它们天生具有响应式特性，能够更灵活地控制元素排列和空间分配。例如，Flexbox 可以方便地让子元素在空间不足时换行或收缩，Grid 则可以根据容器宽度自动调整列数。这些 CSS 新特性大大简化了响应式布局的实现，使设计适应各种屏幕变得更加容易。

总的来说，响应式网页设计通过弹性布局 + 媒体查询等手段，确保网页在不同设备上都能呈现最佳效果。这对于个人作品集网站尤为重要——潜在雇主或客户可能通过手机、平板等各种设备访问你的网站，响应式设计能保证他们无论用什么设备都能顺畅浏览你的作品。

HTML 结构搭建

在这一部分，我们将创建个人作品集网页的 HTML 基础结构。HTML 负责网页的内容和结构，我们需要合理使用语义化的标签来组织页面内容。一个典型的个人作品集网站通常包含以下几个部分：

导航栏（Navigation Bar）
：位于页面顶部，包含网站标题和主要页面链接（如“关于”、“作品”、“联系”等）。导航栏让用户可以方便地跳转到网站的不同部分。
主页头部（Hero Section）
：这是进入网站首先看到的主视觉区域，通常包含你的姓名、头衔以及一句简短的介绍或口号。Hero 部分用于给访客留下第一印象，吸引他们继续浏览。
关于部分（About Section）
：介绍你的背景、技能和经历。可以放一段自我介绍文字和你的头像照片。
作品集部分（Portfolio Section）
：展示你的代表作品。通常以项目卡片或图片网格的形式呈现，每个项目包含标题、简介和预览图等信息。
联系部分（Contact Section）
：提供联系信息或联系表单，方便潜在客户或雇主与你取得联系。
页脚（Footer）
：页面底部区域，通常包含版权信息、社交媒体链接等。

接下来，我们逐步构建这些部分的 HTML 结构。首先，创建一个基本的 HTML5 文档骨架：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>张三的个人作品集</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<!-- 页面内容将在此处添加 -->
</body>
</html>

上述代码中，<meta name="viewport" ...>标签非常重要，它确保网页在移动设备上正确缩放显示。缺少这个标签，响应式设计在移动端可能无法正常工作。

1.添加导航栏

导航栏通常使用<nav>标签包裹，内部包含网站标题和菜单链接。我们使用一个<div>容器来包裹导航内容并居中，这样在大屏幕上导航内容不会撑满整个宽度。

<nav>
  <div class="container">
    <div class="nav-content">
      <h1 class="logo">张三</h1>
      <ul class="nav-links">
        <li><a href="#about">关于</a></li>
        <li><a href="#portfolio">作品集</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </div>
  </div>
</nav>

这里，我们为导航栏添加了一个container类的容器用于限制最大宽度并居中，nav-content用于容纳导航的具体内容（Logo和链接列表）。.logo类用于网站标题样式，.nav-links是无序列表用于放置导航链接。注意链接的href属性使用了页面内锚点（如#about），后续我们会为各部分添加对应的id，点击导航链接时页面会滚动到相应位置。

2.添加主页头部（Hero Section）

主页头部通常是一个全屏或大幅的区域，包含欢迎信息。我们使用<section>标签并赋予hero类来标识这个部分：

<section class="hero">
  <div class="container">
    <div class="hero-content">
      <h2>你好，我是张三</h2>
      <p class="tagline">全栈开发者 &amp; 交互设计师</p>
      <p class="description">专注于前端开发和用户体验设计，热衷于用代码创造有价值的产品</p>
    </div>
  </div>
</section>

这里.hero-content包含欢迎标题和简介文字。你可以根据需要调整内容，例如加入一个“了解更多”按钮等。Hero 部分通常会设置背景色或背景图，这将在 CSS 样式部分实现。

3. 添加关于部分（About Section）

“关于”部分向访客介绍你的个人信息和技能。我们同样使用<section>标签，并赋予about类，同时给该部分一个唯一的id="about"以便导航锚点跳转：

<section class="about" id="about">
  <div class="container">
    <h2>关于我</h2>
    <div class="about-content">
      <img alt="张三头像" class="profile-img" src="images/profile.jpg">
      <div class="bio">
        <p>我是一名热爱技术和设计的全栈开发者，拥有5年的Web开发经验。擅长前端开发和UI/UX设计，能够独立完成从原型设计到前端实现的全流程。我注重代码质量和用户体验，致力于创造简洁优雅且功能强大的产品。</p>
        <p>技术栈包括 HTML5、CSS3、JavaScript，以及 React、Node.js 等。工作之余，我也在学习机器学习和人工智能相关技术，不断扩展自己的技能边界。</p>
      </div>
    </div>
  </div>
</section>

上述代码中，.about-content内部包含一张头像图片和一段个人简介文字。头像使用<img>标签，src指向你的照片路径（假设你已在项目目录下创建images文件夹并放入profile.jpg）。简介文字用<div class="bio">包裹，便于后续样式调整。

4.添加作品集部分（Portfolio Section）

作品集部分是网站的核心，用于展示你的项目作品。我们使用<section class="portfolio" id="portfolio">来包含这一部分：

<section class="portfolio" id="portfolio">
  <div class="container">
    <h2>我的作品集</h2>
    <div class="portfolio-grid">
      <div class="project-card">
        <img alt="项目1预览" class="project-thumbnail" src="images/project1.jpg">
        <h3>项目一</h3>
        <p>项目一简介：这是一个使用 React 开发的电商网站前端，包含商品展示、购物车和结账功能。</p>
      </div>
      <div class="project-card">
        <img alt="项目2预览" class="project-thumbnail" src="images/project2.jpg">
        <h3>项目二</h3>
        <p>项目二简介：这是一个响应式企业官网，采用 HTML5/CSS3 构建，包含公司介绍、产品展示和联系表单。</p>
      </div>
      <div class="project-card">
        <img alt="项目3预览" class="project-thumbnail" src="images/project3.jpg">
        <h3>项目三</h3>
        <p>项目三简介：这是一个基于 Node.js 和 MongoDB 的博客系统，实现了文章发布、评论和用户管理功能。</p>
      </div>
    </div>
  </div>
</section>

在作品集部分，我们使用了一个.portfolio-grid容器来容纳多个.project-card项目卡片。每个项目卡片包含项目预览图、标题和简介。这里我们放置了三个项目作为示例，你可以根据需要增减项目数量。项目图片同样存放在images目录下（示例图片名project1.jpg等）。

5.添加联系部分（Contact Section）

联系部分提供你的联系方式或联系表单。我们使用<section class="contact" id="contact">：

<section class="contact" id="contact">
  <div class="container">
    <h2>联系我</h2>
    <div class="contact-content">
      <div class="contact-info">
        <p><strong>邮箱：</strong>zhangsan@example.com</p>
        <p><strong>电话：</strong>+86 123 4567 8900</p>
        <p><strong>地址：</strong>北京市，中国</p>
      </div>
      &ltform class="contact-form" action="#" method="post">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="message">留言</label>
          <textarea id="message" name="message" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn">发送</button>
      </form>
    </div>
  </div>
</section>

这里我们在联系部分同时提供了联系信息和联系表单。左侧.contact-info显示你的邮箱、电话、地址等信息；右侧是一个简单的 HTML 表单.contact-form，包含姓名、邮箱、留言三个字段和一个提交按钮。表单的action和method属性需要根据后端接收方式配置（示例中action="#"表示提交到当前页，实际应用时应替换为你的服务器端脚本地址）。required属性表示该字段为必填项，浏览器会自动进行基本的表单验证。

6.添加页脚

<footer>
  <div class="container">
    <div class="footer-content">
      <div class="social-links">
        <a href="https://github.com/yourusername" rel="noopener noreferrer" target="_blank">GitHub</a>
        <a href="https://linkedin.com/in/yourusername" rel="noopener noreferrer" target="_blank">LinkedIn</a>
        <a href="https://twitter.com/yourusername" rel="noopener noreferrer" target="_blank">Twitter</a>
      </div>
      <p class="copyright">&copy; 2025 张三。保留所有权利。</p>
    </div>
  </div>
</footer>

到这里，我们已经完成了作品集网站的 HTML 结构搭建。现在的页面还没有任何样式，下一篇文章我们将通过 CSS 为其添加美观的样式和布局。

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。

优网知识库

探索行业前沿，共享知识宝库

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设