Project：个人主页美化

用 CSS3 为个人主页注入灵魂和美感

将朴素的 HTML 文档变成专业、美观、响应式的在线作品

为何美化

你在第 3 章做的个人主页功能完整，但打开浏览器一看——纯文字堆叠，没有颜色，没有间距，像 1995 年的网页

没有 CSS

纯文字堆叠，视觉单调
内容紧贴，没有呼吸感
在任何设备上体验一致地差
缺乏品牌个性

有 CSS

视觉层次清晰，重点突出
布局合理，间距舒适
响应式设计，适配所有设备
展现个人风格和专业感

项目概览

项目目标

将你的 github.io 主页从一个朴素的文档，改造为在任何设备上都看起来很棒的专业在线作品。

学习目标

CSS3 核心语法：选择器、盒模型、颜色、字体
现代布局：Flexbox 和 Grid 实战应用
响应式设计：移动端优先策略
关注点分离：HTML 结构与 CSS 表现

项目约束

严格禁止 JavaScript
所有视觉和布局效果纯 CSS 实现
在自己的真实主页上操作

Part 1: 全局样式

创建 style.css 文件，在所有 HTML 的 <head> 中链接它，为整个网站设定统一的视觉基调。

全局重置

box-sizing: border-box + margin/padding 归零 + 统一字体和颜色 — 所有页面的视觉起点。

标题与交互

h1-h3 层级样式 + 链接悬停效果 + 按钮美化 — 用 CSS 让页面"有设计感"。

全局重置

第一步：统一所有元素的盒模型行为，设置全局字体和颜色

盒模型重置

/* 统一盒模型行为 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 所有元素的 padding 和 border
   都包含在设定的宽高内 */

全局字体

body {
    font-family: 'Helvetica',
        'Arial', sans-serif;
    color: #333333;
    background-color: #ffffff;
    line-height: 1.6;
}

/* 为整个页面设定统一的
   字体族和颜色基调 */

别忘了：在所有 HTML 文件的 <head> 中加入 <link rel="stylesheet" href="style.css">，否则 CSS 不会生效。

标题层级

通过不同的字重、大小和行高，让用户一眼识别内容的重要性

/* 页面主标题 */
h1 {
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 0.5em;
}

/* 章节标题 */
h2 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.3;
    color: #2d2d2d;
    margin-top: 1em;
    margin-bottom: 0.6em;
}

/* 小节标题 */
h3 {
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.4;
    color: #3d3d3d;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}

视觉层级：从 h1 到 h3，字号依次减小、字重依次变轻、颜色依次变浅。让用户一眼看出内容的层次关系。

链接与按钮

提供清晰的交互反馈——让用户知道哪些元素可以点击

链接美化

a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #004499;
    text-decoration: underline;
}

a:visited {
    color: #660099;
}

a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

按钮美化

.submit-btn {
    background-color: #0066cc;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background-color: #004499;
    box-shadow: 0 4px 8px
        rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

Part 2: 现代布局

运用 Flexbox 和 Grid 对页面的核心布局进行重构，告别从上到下的文档流布局。

Flexbox 导航与卡片

导航栏水平排列 + 作品卡片自动换行 — Flexbox 的两大经典实战场景。

Grid 两栏布局

about.html 主内容 2/3 + 侧边栏 1/3 — grid-template-columns: 2fr 1fr 一行搞定。

导航栏布局

用 Flexbox 实现导航栏：Logo 在左，链接在右，水平排列

/* 导航容器 */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 导航链接列表 */
nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav ul li a {
    color: #333333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #0066cc;
}

关键属性：display: flex 开启弹性布局，justify-content: space-between 让 Logo 和链接分布两端，gap 控制链接间距。

两栏布局

用 Grid 为 about.html 创建两栏布局：主内容 2/3，侧边栏 1/3

/* 主容器：两栏布局 */
main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 主内容区 */
article {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 侧边栏 */
aside {
    background-color: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
}

Grid 核心

2fr 1fr — 主内容占两份，侧边栏占一份
gap: 2rem — 两栏之间 2rem 间距
height: fit-content — 侧边栏高度跟随内容

卡片列表

用 Flexbox 为 portfolio.html 创建自动换行的卡片式作品列表

/* 作品容器 */
.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 2rem 0;
}

/* 单个项目卡片 */
.project-card {
    flex-basis: 30%;
    min-width: 280px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

关键属性：flex-wrap: wrap 允许换行，flex-basis: 30% 控制卡片宽度，min-width: 280px 保证最小宽度。悬停时卡片上浮 + 阴影加深，增加交互感。

Part 3: 响应式

采用移动端优先策略，让你的网站在手机、平板和桌面上都表现出色。

媒体查询实战

移动端单栏 → 平板 768px → 桌面 1024px — 三个断点逐步增强布局。

响应式导航

手机垂直排列，桌面水平排列 — 最实用的响应式模式。

媒体查询

移动端默认样式 → 平板 768px → 桌面 1024px，逐步增强

/* 移动端默认：单栏布局 */
body { font-size: 16px; }

nav ul {
    flex-direction: column;
    gap: 1rem;
}

main {
    grid-template-columns: 1fr;
}

/* 平板端：768px 及以上 */
@media (min-width: 768px) {
    body { font-size: 18px; }

    nav ul {
        flex-direction: row;
        gap: 2rem;
    }

    main {
        grid-template-columns: 2fr 1fr;
    }
}

/* 桌面端：1024px 及以上 */
@media (min-width: 1024px) {
    main {
        max-width: 1200px;
        margin: 0 auto;
    }
}

移动优先：默认样式服务于小屏，再用 min-width 逐步增强。先让手机体验完美，再优化大屏。

响应式导航

手机上垂直排列，平板及以上水平排列——最常见的响应式模式

移动端（<768px）

┌──────────┐
│  Logo     │
├──────────┤
│ 首页      │
│ 关于      │  flex-direction: column
│ 作品      │
│ 联系      │
└──────────┘

桌面端（≥768px）

┌──────────────────────────┐
│ Logo   首页·关于·作品·联系 │
└──────────────────────────┘
            ↑
   flex-direction: row
@media (min-width: 768px)

移动优先的关键：默认样式服务于小屏，再用 @media (min-width: 768px) 逐步增强大屏体验。从简单到复杂，代码更清晰。

自查清单

基础配置

CSS 文件已创建并链接到所有 HTML 页面
网站有统一的字体、颜色和间距
链接和按钮有 :hover 交互效果

布局实现

导航栏使用 Flexbox 水平布局
至少一个页面使用 Grid 多栏布局
作品列表使用 Flexbox 卡片布局

响应式设计

手机尺寸下为单栏布局
平板/桌面尺寸下为多栏布局
缩放窗口时布局流畅过渡

代码质量

CSS 代码格式清晰，易于阅读
未使用任何 JavaScript
所有 HTML 正确引用 CSS

完整成品 CSS

把前面散落的片段拼到一起，就是一份可以直接用的 style.css——对照检查你的成果

/* === 全局重置 === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: #333;
}

/* === 导航栏（Flexbox）：默认手机竖排 === */
.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px;
  background: #D06519;
}
.nav a { color: #fff; text-decoration: none; }

/* === 主体布局：默认手机单栏 === */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

/* === 作品卡片（Flexbox） === */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.card img { width: 100%; height: 180px; object-fit: cover; }

/* === 响应式：平板及以上增强为多栏（移动优先） === */
@media (min-width: 768px) {
  .nav { flex-direction: row; justify-content: space-between; }
  .nav a { margin-left: 16px; }
  .layout { grid-template-columns: 2fr 1fr; }
}

怎么用：把这段代码存为 style.css，和你的 HTML 放在同一目录，HTML 里用 <link rel="stylesheet" href="style.css"> 引入。再用前面学过的过渡、动画给按钮和卡片加上 hover 效果，就是一份完整的个人主页了。

美化常见故障

样式不生效、布局乱掉——这几个坑在本项目里最常见

样式完全没生效

九成是 <link> 没写对。检查三件事：rel 写成 stylesheet（不是 style）、href 路径正确、CSS 文件和 HTML 在同一目录或路径对应。

加了 padding 后盒子撑破容器、横向滚动条出现

忘了全局重置 box-sizing: border-box。默认 content-box 下，width 不含 padding/border，盒子会比预期宽。务必带上 *, *::before, *::after { box-sizing: border-box; }。

Flex 卡片在窄屏挤成一团或溢出

给卡片设 min-width: 0（允许缩小）+ flex: 1 1 280px（基础宽度）。光写 flex: 1 而内容很长时，子项不会缩到 280px 以下。

图片变形或撑爆卡片

给图片加 width: 100%; height: 固定值; object-fit: cover;。object-fit: cover 必须配固定高度才生效，否则图片仍按原比例显示。

课程总结

CSS3 核心语法

选择器、盒模型、颜色、字体——为网页设定统一的视觉基调。

现代布局技术

Flexbox 和 Grid——告别文档流，构建灵活强大的页面布局。

响应式设计

移动端优先 + 媒体查询——一个网站适配所有设备。

关注点分离

HTML 负责结构，CSS 负责表现——为后续学习 JavaScript 打下基础。

下一步：尝试添加 CSS 动画和过渡效果让页面更生动，或者学习 CSS 框架（如 Tailwind）加速开发。然后开始学习 JavaScript，为页面添加交互功能。

恭喜完成！

你已经掌握了现代 CSS 的核心技能

CSS 是网页的灵魂，它不仅美化页面，更决定用户体验。通过本项目，你已经能够创建出专业、美观、响应式的个人主页。

选择器与盒模型

精准选中元素，掌控尺寸与间距

Flexbox & Grid

告别文档流，构建灵活强大布局

响应式设计

一个网站，适配所有设备

下一步：尝试添加 CSS 动画和过渡效果让页面更生动，或者学习 CSS 框架（如 Tailwind）加速开发。然后开始学习 JavaScript，为页面添加交互功能。