页脚和最终润色 · 跟马丁学编程

跟我看：页脚

页脚收尾页面。通常颜色更深、更安静，留在底部：

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

页脚应该包括：谁做的网站、年份、联系方式（可以虚构或用学校的——永远不要把家庭地址或电话号码放在网站上）。

跟我看：让你看起来像专业人士的小细节

三件几乎没人知道、但差别巨大的小事：

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) 把元素放大到 103%，transition 说：“在 0.2 秒内平滑变化。” 鼠标悬停在照片上——看到那轻轻的一抬？现代网站就是这样做的。

轮到你了 💪

按示例给页脚加样式（颜色可以和页眉搭配），检查是否包括：谁做的网站 + 年份。
添加示例里的三个专业细节。
全面检查整个网站。 过一遍这个清单：
- 菜单从每个页面到每个页面都能用。
- 所有图片都显示，且填了 alt。
- 把窗口缩小到手机宽度——一切正常，没有横向溢出。
- 页脚没有家庭地址、电话号码或完整学校/班级信息（安全！）。
- 每个页面的 <title> 都有意义。

完整页脚参考答案（调整颜色）

HTML（每个页面相同）：

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS：

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

安全第一： 下一课你的网站要上真正的互联网，任何人都能看到。所以绝不能包括：确切家庭地址、电话号码、邮箱、带班级的完整学校名，或你或照片里的人不舒服的照片。和家长一起过一遍网站，一起检查。

✅

检查一下： 网站有带菜单的页眉、漂亮列里的内容、卡片、照片、页脚——悬停时东西会轻轻动一下。看起来像真正的网站。因为它就是！还剩最后一步：展示给世界。

这堂课你要记住

页脚：深色背景、浅色文字、text-align: center、margin-top。
transition + transform = 平滑微动画，就像专业网站。
发布前永远用家长的眼光再检查内容——个人信息不属于互联网。