第二部分：网页的妆容 —— CSS（下）

目录

• [6 布局基础：Display 与 Position - 元素如何排列和定位](#6 布局基础：Display 与 Position - 元素如何排列和定位)
• • [6.1 小例子](#6.1 小例子)
  • [6.2 练习](#6.2 练习)
• [7 Flexbox 弹性布局：一维布局利器](#7 Flexbox 弹性布局：一维布局利器)
• • [7.1 小例子](#7.1 小例子)
  • [7.2 练习](#7.2 练习)
• [8 Grid 网格布局：强大的二维布局系统](#8 Grid 网格布局：强大的二维布局系统)
• • [8.1 小例子](#8.1 小例子)
  • [8.2 练习](#8.2 练习)
• [9 响应式设计与媒体查询：适应不同设备的"装修方案"](#9 响应式设计与媒体查询：适应不同设备的“装修方案”)
• • [9.1 小例子：根据屏幕宽度改变导航栏和布局](#9.1 小例子：根据屏幕宽度改变导航栏和布局)
  • [9.2 练习](#9.2 练习)
• [10 CSS 动画与过渡：让页面"动"起来](#10 CSS 动画与过渡：让页面“动”起来)
• • [10.1 小例子](#10.1 小例子)
  • [10.2 练习](#10.2 练习)
• 结语

6 布局基础：Display 与 Position - 元素如何排列和定位

现在我们开始真正地"摆放家具"了。display 决定了元素是像"积木块"（block，堆叠起来）还是像"文字"（inline，排成一行）。position 则允许我们更自由地控制元素的位置，甚至让它脱离正常的排列顺序。

• 文档流: 浏览器默认排列元素的方式。块级元素从上到下依次排列，行内元素从左到右依次排列。
• display: inline-block 的妙用: 它结合了 inline（不换行）和 block（可设置宽高）的优点，常用于将多个块状元素（如图标和文字、几个卡片）并排显示。
• position: relative; + position: absolute; 组合: 这是非常常用的布局技巧。给父元素设置 position: relative (不移动位置，只是为了成为定位参照)，然后给子元素设置 position: absolute 和 top/right/bottom/left，就可以精确地把子元素定位在父元素的任意位置，常用于制作角标、弹出层内的关闭按钮等。
• z-index: 只对设置了 position (非 static) 的元素有效。当你需要控制哪个元素盖在哪个元素上面时使用。比如，确保弹出的菜单总是在页面其他内容之上。

6.1 小例子

1. 简单并排显示 (inline-block)

创建06.html

<div class="item">项目一</div>
<div class="item">项目二</div>
<div class="item">项目三</div>

创建06.css

.item {
  display: inline-block; /* 让 div 可以并排 */
  width: 100px;
  height: 80px;
  background-color: lightcoral;
  margin: 5px;
  text-align: center;
  line-height: 80px; /* 垂直居中 (简单方法) */
}

运行后的效果

2. 固定顶栏 (fixed)

创建07.html

<nav class="fixed-nav">固定导航栏</nav>
<div style="height: 1000px; background-color: #eee; padding-top: 60px;">页面内容...</div>

创建07.css

.fixed-nav {
  position: fixed; /* 固定定位 */
  top: 0; /* 距离视口顶部 0px */
  left: 0; /* 距离视口左边 0px */
  width: 100%; /* 宽度占满 */
  height: 50px;
  background-color: navy;
  color: white;
  text-align: center;
  line-height: 50px;
  z-index: 100; /* 确保在最上层 */
}

运行后的效果

3. 父相子绝 (relative + absolute)

创建08.html

<div class="card">
  <span class="badge">热门</span>
  卡片内容...
</div>

创建08.css

.card {
  position: relative; /* 父元素相对定位，作为参照物 */
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 20px;
}

.badge {
  position: absolute; /* 子元素绝对定位 */
  top: -10px; /* 相对于父元素顶部向上偏移 10px */
  right: -10px; /* 相对于父元素右侧向右偏移 10px */
  background-color: red;
  color: white;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 5px;
}

运行后的效果

6.2 练习

1. 尝试制作一个简单的"图片在左，文字在右"的图文混排效果。可以使用 inline-block 或者后面将学到的 Flexbox/Grid。
2. 创建一个带有"关闭"按钮（比如一个 'X'）的提示框。将提示框本身 position: fixed 或 absolute 放在页面中间或角落，然后将"关闭"按钮 position: absolute 定位在提示框的右上角。使用 z-index 确保提示框在其他内容之上。
3. 实现一个 position: sticky 的侧边栏或导航元素，让它在页面向下滚动时能"粘"在顶部。

7 Flexbox 弹性布局：一维布局利器

Flexbox（弹性盒子）是 CSS3 引入的一种强大的布局模式，特别适合用于一维布局（即沿着一条直线排列元素，无论是水平还是垂直）。想象一下你有几个积木，Flexbox 让你能非常方便地控制它们是紧挨着、均匀分布、居中对齐，还是自动伸缩填满空间。

核心概念：

• 容器 (Flex Container): 设置了 display: flex 的父元素。
• 项目 (Flex Items): 容器内的直接子元素。
• 主轴 (Main Axis): 项目排列的主要方向，由 flex-direction 决定。默认是水平方向 (row)。
• 交叉轴 (Cross Axis): 与主轴垂直的方向。如果主轴是水平的，交叉轴就是垂直的。

上图展示了：

• Flexbox 的主轴（红色箭头）和交叉轴（绿色箭头）
• justify-content 属性的不同值（flex-start、center、flex-end）对齐效果
• align-items 属性的不同值（flex-start、center、stretch）对齐效果

justify-content 控制项目在主轴上的排列，align-items 控制项目在交叉轴上的排列。这是最常用的两个属性。

• justify-content: center; 主轴居中。
• align-items: center; 交叉轴居中。
• 同时使用这两个可以让项目在容器中水平垂直居中！

flex-grow, flex-shrink, flex-basis 控制项目的弹性伸缩能力：

• flex-grow: 1; 意味着该项目会"贪婪地"占据所有可用的额外空间。如果有多个项目设置了 flex-grow，它们会按比例分配空间。
• flex-shrink: 0; 意味着该项目即使空间不足也不会缩小。
• flex-basis 定义了项目在计算如何分配空间之前的"理想"尺寸。

7.1 小例子

1. 水平垂直居中

创建09.html

<div class="container center-content">
  <div class="box">居中</div>
</div>

创建09.css

.container {
  display: flex;
  height: 200px; /* 需要容器有高度才能看到垂直居中 */
  background-color: lightgray;
}
.center-content {
  justify-content: center; /* 主轴（水平）居中 */
  align-items: center;    /* 交叉轴（垂直）居中 */
}
.box {
  width: 80px;
  height: 50px;
  background-color: dodgerblue;
  color: white;
  text-align: center;
  line-height: 50px;
}

运行后的效果

2. 等高列布局 & 导航菜单

创建10.html

<nav class="nav-menu">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item grow-item"></a> <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item">联系</a>
</nav>

创建10.css

.nav-menu {
  display: flex;
  background-color: #333;
  padding: 10px;
  align-items: center; /* 垂直居中对齐（如果项目高度不同） */
  gap: 15px; /* 设置项目间距 */
}
.nav-item {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  /* 默认 flex: 0 1 auto; */
}
.nav-item:hover {
  background-color: #555;
}
.grow-item {
  flex-grow: 1; /* 这个空项目会占据所有剩余空间，把后面的项推到右边 */
}

运行后的效果

3. 横向滚动效果

创建11.html

<div class="scroll-container">
  <div class="scroll-item">项目一</div>
  <div class="scroll-item">项目二</div>
  <div class="scroll-item">项目三</div>
  <div class="scroll-item">项目四</div>
  <div class="scroll-item">项目五</div>
</div>

创建11.css

.scroll-container {
  display: flex;
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止换行 */
  gap: 10px; /* 设置项目间距 */
}
.scroll-item {
  flex: 0 0 auto; /* 项目不会增长或收缩，宽度由内容决定 */
  width: 100px; /* 固定宽度 */
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  margin: 10px; 
}

运行后的效果

7.2 练习

使用 Flexbox 布局一个卡片列表。

• 让卡片（比如 div.card）能够在一行内显示。
• 当一行放不下时，自动换行 (flex-wrap: wrap;)。
• 尝试使用 justify-content 的不同值（如 space-between, space-around）来调整卡片在一行内的分布方式。
• 给卡片设置 flex-basis（比如 flex-basis: 200px;）来建议它们的初始宽度，并使用 flex-grow: 1; 让它们在空间允许时可以伸展填充。
• 使用 gap 属性设置卡片之间的间距。

8 Grid 网格布局：强大的二维布局系统

如果 Flexbox 擅长一维布局，那么 Grid 就是二维布局的王者！它允许你将页面划分成行和列组成的网格，然后将元素精确地放置在这些网格单元格中，甚至让元素跨越多个单元格。非常适合构建复杂的页面结构，如仪表盘、杂志布局、经典的网站布局（如圣杯布局）。

核心概念：

• 网格容器 (Grid Container): 设置了 display: grid 的父元素。
• 网格项目 (Grid Items): 容器内的直接子元素。
• 网格线 (Grid Lines): 划分网格的水平和垂直线条。
• 网格轨道 (Grid Tracks): 两条相邻网格线之间的空间（即行或列）。
• 网格单元格 (Grid Cell): 四条网格线包围的最小单位。
• 网格区域 (Grid Area): 由任意四条网格线包围的矩形区域，可以包含一个或多个单元格。
  

上图展示了：

1. Grid 网格线、轨道、单元格和区域的基本结构
2. grid-template-columns 和 grid-template-rows 的分布效果
3. grid-template-areas 的实际布局示例

常用技巧：

• fr 单位: 代表 "fraction" (分数)，用于按比例分配网格容器中的可用空间。1fr 2fr 表示将可用空间分成 3 份，第一个轨道占 1 份，第二个轨道占 2 份。
• grid-template-areas: 非常直观的方式来定义布局。先给网格项目用 grid-area 命名，然后在容器上用 grid-template-areas 像画图一样排列这些名字。
• repeat() 函数: 简化重复的轨道定义，如 grid-template-columns: repeat(3, 1fr); 等同于 1fr 1fr 1fr;。
• minmax() 函数: 定义轨道的最小和最大尺寸，如 minmax(100px, 1fr) 表示轨道宽度至少 100px，但可以放大以占据可用空间。

8.1 小例子

1. 经典圣杯布局 (Header, Nav, Content, Sidebar, Footer)

创建12.html

<div class="holy-grail-container">
  <header class="hg-header">Header</header>
  <nav class="hg-nav">Navigation</nav>
  <main class="hg-content">Main Content Area</main>
  <aside class="hg-sidebar">Sidebar</aside>
  <footer class="hg-footer">Footer</footer>
</div>

创建12.css

.holy-grail-container {
  display: grid;
  min-height: 100vh; /* 容器至少和视口一样高 */
  /* 定义命名的网格区域 */
  grid-template-areas:
    "header header header"
    "nav    content sidebar"
    "footer footer footer";
  /* 定义列宽：导航固定宽，内容自适应，侧边栏固定宽 */
  grid-template-columns: 150px 1fr 120px;
  /* 定义行高：头部页脚自适应，中间内容区域占满剩余高度 */
  grid-template-rows: auto 1fr auto;
  gap: 10px; /* 网格间距 */
}

/* 将 HTML 元素分配到对应的网格区域 */
.hg-header { grid-area: header; background-color: lightblue; }
.hg-nav    { grid-area: nav;    background-color: lightpink; }
.hg-content{ grid-area: content; background-color: lightyellow; }
.hg-sidebar{ grid-area: sidebar; background-color: lightgreen; }
.hg-footer { grid-area: footer; background-color: lightgray; }

/* 给每个区域加点内边距方便看 */
.holy-grail-container > * {
  padding: 15px;
  text-align: center;
}

运行后的效果

8.2 练习

使用 Grid 布局来创建一个复杂的仪表盘 (Dashboard) 界面的框架。

• 定义一个包含侧边栏 (sidebar)、主内容区 (main-content)、可能还有一个顶部信息栏 (top-info) 的网格布局。
• 尝试使用 grid-template-columns, grid-template-rows 和 grid-area 来实现。
• 让主内容区能够占据大部分空间。
• 思考如果要在主内容区内部再嵌套一个两列或三列的布局，该如何做（Grid 可以嵌套使用）。

9 响应式设计与媒体查询：适应不同设备的"装修方案"

现在的用户通过各种设备访问网页：手机、平板、笔记本、大屏台式机。响应式设计 (Responsive Web Design, RWD) 的目标就是让你的网页能够在所有这些设备上都提供良好的阅读和交互体验。这就好比同一套房子，我们需要为小户型和大户型准备不同的家具摆放和装饰方案。

核心技术：

1. 设置 Viewport Meta 标签: 这是必须 加在 HTML <head> 中的第一步！

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

   • width=device-width：告诉浏览器将视口宽度设置为设备的屏幕宽度。
   • initial-scale=1.0：设置初始缩放比例为 1，禁止移动端浏览器默认的缩放行为。
     没有这个标签，媒体查询可能无法在移动设备上正常工作！

2. 使用媒体查询 (@media) : 这是实现响应式的关键。它允许你根据设备的特性（最常用的是屏幕宽度）来应用不同的 CSS 规则。

   • 断点 (Breakpoints): 我们通常会选择几个关键的屏幕宽度值作为"断点"，在这些断点处改变布局或样式。例如，小于 600px 认为是手机，600px 到 900px 是平板，大于 900px 是桌面。
   • max-width vs min-width:
     • @media (max-width: 600px) { ... }：规则应用于屏幕宽度 小于等于 600px 的设备。
     • @media (min-width: 601px) { ... }：规则应用于屏幕宽度 大于等于 601px 的设备。

设计方法论：

• 移动优先 (Mobile First): 推荐！ 先为移动设备（窄屏幕）设计和编写基础 CSS，然后使用 min-width 的媒体查询逐步为更大的屏幕添加或修改样式。这通常能产生更简洁、性能更好的 CSS。
• 桌面优先 (Desktop First): 先为桌面设备（宽屏幕）设计，然后使用 max-width 的媒体查询来调整或简化布局以适应更小的屏幕。

9.1 小例子：根据屏幕宽度改变导航栏和布局

假设我们有一个 Flexbox 导航栏和一个两列布局。

创建
HTML (基本结构):

<nav class="main-nav">
  <a href="#">Logo</a>
  <div class="nav-links">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </div>
</nav>

<div class="content-area">
  <main class="main-content">主要内容...</main>
  <aside class="sidebar">侧边栏...</aside>
</div>

CSS (移动优先):

/* --- 默认样式 (Mobile First) --- */
.main-nav {
  display: flex;
  flex-direction: column; /* 移动端：Logo 在上，链接在下 */
  align-items: center;
  background-color: #f8f8f8;
  padding: 10px;
}
.nav-links {
  display: flex;
  flex-direction: column; /* 移动端：链接垂直排列 */
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.nav-links a {
  padding: 8px;
  text-decoration: none;
  color: #333;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.nav-links a:last-child {
  border-bottom: none;
}

.content-area {
  display: flex;
  flex-direction: column; /* 移动端：主内容在上，侧边栏在下 */
}
.main-content, .sidebar {
  padding: 15px;
}
.sidebar {
  background-color: lightgoldenrodyellow;
}

/* --- 平板及以上样式 (Tablet and Up) --- */
@media (min-width: 768px) {
  .main-nav {
    flex-direction: row; /* 平板：水平排列 */
    justify-content: space-between; /* Logo 左对齐，链接右对齐 */
  }
  .nav-links {
    flex-direction: row; /* 平板：链接水平排列 */
    width: auto;
    margin-top: 0;
  }
  .nav-links a {
    width: auto;
    border-bottom: none;
    margin-left: 15px;
  }

  .content-area {
    flex-direction: row; /* 平板：主内容和侧边栏并排 */
    gap: 20px;
  }
  .main-content {
    flex-grow: 1; /* 主内容占据更多空间 */
  }
  .sidebar {
    flex-basis: 250px; /* 侧边栏固定宽度 */
    flex-shrink: 0; /* 不缩小 */
  }
}

移动端的效果

PC端的效果

9.2 练习

将你的阶段项目 1 （个人博客/食谱页面）改造成一个响应式页面。

1. 确保添加了 viewport meta 标签。
2. 采用移动优先的策略。首先让页面在窄屏幕（手机）上看起来不错（可能需要单列布局，较大的字体）。
3. 选择至少一个断点 （例如 768px 或 992px）。
4. 使用 @media (min-width: ...) 媒体查询，为大于该断点的屏幕调整布局（例如，从单列变为两列或三列，调整导航栏样式，减小字体大小等）。
5. 在浏览器的开发者工具中模拟不同的设备尺寸，测试响应式效果。

10 CSS 动画与过渡：让页面"动"起来

静态的页面虽然能看，但适当的动态效果可以极大地提升用户体验，引导用户注意力，或者纯粹增加趣味性。CSS 提供了两种主要方式来实现动态效果：transition 用于简单的状态间平滑过渡，animation 用于创建更复杂的、可重复的动画序列。transform 属性经常与它们配合使用，来实现移动、旋转、缩放等视觉变换，并且性能通常比直接改变 top/left 或 width/height 要好。

• transition: 最适合用在交互反馈上，比如鼠标悬停按钮时，颜色、大小平滑变化，而不是瞬间改变。只需要在元素原始状态 下定义 transition 属性，然后在触发状态（如 :hover, :focus, 或通过 JavaScript 添加/移除类）下改变相应的 CSS 属性即可。
• animation: 需要先用 @keyframes 定义动画的名字和过程（从什么状态 from/0% 到什么状态 to/100%，以及中间状态），然后在元素上通过 animation 属性来"调用"这个定义好的动画，并设置时长、次数等参数。适合做加载指示器、循环播放的特效等。

10.1 小例子

1. 按钮悬停过渡效果

创建14.html

<button class="my-button">Hover Me</button>

创建14.css

.my-button {
  padding: 10px 20px;
  background-color: steelblue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  /* 定义过渡效果 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* 过渡背景色和变换效果，持续 0.3 秒，使用 ease 速度曲线 */
}

.my-button:hover {
  background-color: darkslateblue;
  transform: scale(1.1); /* 悬停时放大 10% */
}

运行后的效果

2. 简单加载动画 (旋转)

创建15.html

<div class="loader"></div>

创建15.css

/* 定义旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* 浅灰色背景圆环 */
  border-top: 5px solid #3498db; /* 蓝色顶部圆环，形成旋转效果 */
  border-radius: 50%; /* 使其成为圆形 */

  /* 应用动画 */
  animation-name: spin; /* 使用名为 spin 的动画 */
  animation-duration: 1s; /* 每次旋转持续 1 秒 */
  animation-timing-function: linear; /* 匀速旋转 */
  animation-iteration-count: infinite; /* 无限循环 */
}

运行后的效果

10.2 练习

为你之前练习中创建的"卡片列表"中的卡片添加一个简单的交互动画：

1. 使用 transition，当鼠标悬停 在卡片上时，让卡片轻微向上移动 （transform: translateY(-5px);）并/或添加一个细微的阴影 (box-shadow) 效果，让这个变化过程平滑进行。
2. (可选挑战) 尝试创建一个更复杂的动画，比如使用 @keyframes 让一个元素（比如一个小图标）实现跳动或闪烁的效果。

阶段项目 2：美化你的第一个项目

现在，是时候把你学到的所有 CSS 知识应用到你的第一个阶段项目（个人博客/食谱页面）上了！

目标：

1. 视觉设计: 给页面选择合适的配色方案、字体、间距，让它看起来专业、美观、协调。运用你学到的 color, font-*, background, padding, margin, border 等属性。
2. 布局: 使用 Flexbox 或 Grid（或者两者结合）来构建页面的主要布局结构。确保内容组织清晰、合理。
3. 响应式: 让你的页面在不同屏幕尺寸下（至少模拟手机和桌面）都能良好显示。使用媒体查询调整布局、字体大小、元素的显示/隐藏等。
4. 交互增强 (可选): 添加一些简单的 transition 效果，比如链接悬停变色、按钮悬停放大、图片悬停加亮等，提升用户体验。

要求：

• 所有 CSS 代码必须 写在外部样式表 (.css 文件) 中。
• 代码结构清晰，最好添加注释说明。
• 在浏览器开发者工具中测试不同屏幕尺寸下的效果。

这个项目将是你综合运用 CSS 知识的绝佳机会。大胆尝试，发挥创意，把你的"毛坯房"装修成一个漂亮的"精装房"吧！

结语

恭喜你！完成了 CSS 部分的学习。现在你已经掌握了给网页"化妆"和"布局"的核心技能。从简单的颜色、字体调整，到复杂的 Flexbox、Grid 布局，再到响应式设计和动画效果，你已经具备了将一个朴素的 HTML 结构打造成视觉吸引、用户友好的网页的能力。

CSS 的世界非常广阔，还有很多高级特性和技巧（如变量、Sass/Less 预处理器、更复杂的动画库等）等待你去探索。但目前所学的基础已经足够你构建出非常专业和现代的网页界面了。

最重要的还是不断练习！尝试去模仿一些你喜欢的网站的布局和样式，动手去实现它们，这是提高 CSS 技能最快的方法。

接下来，我们将进入激动人心的 JavaScript 篇章，学习如何给我们的网页添加交互行为，让它真正"活"起来！准备好迎接编程逻辑的挑战吧！

项目开源地址

https://github.com/wedalowcode/my-first-web-project.git