第1章：实战项目一：个人简历页面（HTML+CSS）——页面结构规划与头部导航区设计

好，咱们直接开始第一个实战项目。

我个人习惯，学任何新技术，先动手做点能看得见的东西。简历页面就是个绝佳的起点——它结构清晰，又不失挑战。你想想看，一个页面该有的元素它全有：头部、导航、内容区、列表、页脚。做完这个，你对HTML+CSS的掌控感会完全不一样。

1.1 页面结构规划——先搭骨架，再填肉

写页面之前，我建议你先在纸上画个草图。别笑，这招真管用。我在项目中遇到过太多次，上来就写代码，写到一半发现结构不对，回头全删了重来。浪费时间。

简历页面的整体结构，说白了就这几块：

• 头部（Header）：放你的名字、一句简短的个人标签
• 导航（Nav）：快速跳转到页面各个区域
• 个人信息展示区（About）：照片、简介、核心优势
• 技能与项目列表（Skills & Projects）：展示你会什么、做过什么
• 页脚与联系方式（Footer）：邮箱、电话、社交链接

嗯，这里要注意：结构规划决定了后续CSS好不好写。如果你一开始就把所有内容堆在一个<div>里，后面想调整布局？那可就费劲了。

我一般会先写出这样的HTML骨架：

<header>
  <!-- 名字 + 标签 -->
</header>

<nav>
  <!-- 导航链接 -->
</nav>

<main>
  <section id="about">
    <!-- 个人信息 -->
  </section>

  <section id="skills">
    <!-- 技能列表 -->
  </section>

  <section id="projects">
    <!-- 项目展示 -->
  </section>
</main>

<footer>
  <!-- 联系方式 -->
</footer>

你看，这样写出来，哪怕还没加任何样式，页面的“阅读顺序”已经非常清晰了。搜索引擎和屏幕阅读器都会喜欢这种结构。

1.2 头部与导航区设计——第一印象，从这里开始

头部是用户第一眼看到的东西。我个人习惯，头部要简洁有力。别放一堆花里胡哨的东西，一个名字，一句定位语，足够了。

举个例子：

<header>
  <h1>张三</h1>
  <p>全栈工程师 · 5年实战经验 · 热爱技术分享</p>
</header>

导航区呢？我建议用<nav>标签包裹，里面放一个无序列表。为什么用列表？因为导航本质上就是一个“链接的集合”，列表语义最准确。

<nav>
  <ul>
    <li><a href="#about">关于我</a></li>
    <li><a href="#skills">技能</a></li>
    <li><a href="#projects">项目</a></li>
    <li><a href="#contact">联系我</a></li>
  </ul>
</nav>

接下来是CSS。头部和导航的样式，我通常会这样处理：

/* 头部样式 */
header {
  text-align: center;
  padding: 40px 20px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

header h1 {
  font-size: 2.5em;
  margin: 0;
  letter-spacing: 2px;
}

header p {
  font-size: 1.1em;
  opacity: 0.9;
  margin-top: 8px;
}

/* 导航样式 */
nav {
  background: #333;
  padding: 12px 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  padding: 6px 12px;
  transition: color 0.3s;
}

nav a:hover {
  color: #ffd700;
}

这里有个细节我想强调一下：导航的list-style: none一定要写。浏览器默认会给<ul>加上圆点，你不去掉的话，导航看起来就像购物清单，很业余。

1.3 让导航“粘”在顶部

如果你想让导航在滚动页面时始终固定在顶部，可以加上position: sticky。我个人非常喜欢这个属性，它比fixed更“聪明”——它只在滚动到特定位置后才固定。

nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

为什么会这样？因为sticky不会一开始就脱离文档流，它会在你滚动经过它之后才“粘”住。用户体验很好，不会遮挡头部内容。

1.4 响应式考虑——别让导航在小屏上挤成一团

嗯，这里要提一嘴。现在很多人用手机看简历，导航如果还是横排显示，在小屏幕上就会挤得很难看。我建议至少加一个简单的媒体查询：

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

这样在手机屏幕上，导航项会竖着排，点击区域也更大，操作起来舒服多了。

1.5 本章小结

这一章我们做了两件事：

1. 规划了简历页面的整体结构，用语义化标签搭好了骨架
2. 设计了头部和导航区，并添加了基础的样式

说白了，你现在已经有一个“看起来像那么回事”的页面框架了。下一章，我们会往里面填充个人信息展示区，让页面真正“活”起来。

记住一句话：结构是页面的骨架，样式是页面的皮囊。骨架歪了，皮囊再好看也没用。所以这一章的基础一定要打牢。

好，先到这里。动手试试吧。