个人博客静态站-三亩地-编程学习日记

前端 · 入门

不写一行 JS，也能搭出一个能上线的博客

这是我从「学完 HTML/CSS 标签」到「能交付一个像样的页面」之间的过渡项目。它逼着你直面真实布局问题：导航怎么横向排？文章卡片怎么等高？手机上又怎么换行？写完之后再去看任何网站的布局，你都能猜到它是怎么搭出来的。

技术栈 HTML / CSS / 响应式

预计耗时 5 - 8 小时

难度等级入门

核心布局 Flexbox + Grid

HTML5 语义化 CSS3 Flexbox 媒体查询 CSS 变量

STEPS

分四步搭好静态站

不碰 JS，把全部精力放在结构与样式上，每一步都先用浏览器看到再继续。

1

写语义化骨架

用 <header> <nav> <main> <article> <aside> <footer> 把首页分区。不要全用 div——语义化标签对 SEO 和无障碍都更友好。这一步只写结构，每个区域先放占位文字。

2

导航与英雄区

导航用 Flexbox：justify-content: space-between 把 logo 推到左、菜单推到右。英雄区给一个大标题 + 副标题 + 两个按钮，背景图用 background-size: cover 配合一个半透明遮罩。

3

文章卡片网格

文章列表用 display: grid; grid-template-columns: repeat(3, 1fr);。给每张卡片 display: flex; flex-direction: column;，正文用 flex: 1，标题与按钮自然顶到上下两端，等高问题就解决了。

4

移动端响应式

在 @media (max-width: 768px) 里把网格改成 1fr 单列，导航菜单隐藏换成汉堡按钮（哪怕不交互先放着），文章正文字号调小。拖动浏览器窗口从大到小，找到布局「断裂」的临界点，针对那个点加断点。

CODE

关键代码片段

响应式与等高卡片的核心写法，理解了这两段几乎能套到任何列表页。

/* 1. 文章卡片网格 + 等高卡片 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.post-card .excerpt { flex: 1; } /* 关键：让摘要撑满，按钮往下顶 */

/* 2. 响应式断点 */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .nav-menu { display: none; } /* 移动端折叠菜单 */
  .hero h1 { font-size: 1.8rem; }
}

/* 3. 用 CSS 变量统一管理颜色与间距 */
:root {
  --ink: #2d2a22;
  --line: #e6d9c0;
  --accent: #d89b94;
  --r-md: 16px;
}
.post-card { border: 1px solid var(--line); border-radius: var(--r-md); }

布局题的真正难点从来不是某个属性怎么写，而是「先想清楚结构再动手」。先把页面拆成几块、每块用横排还是竖排、什么时候要换行——想清楚这些，CSS 属性只是落笔。写完这个项目我最大的收获，是养成了「先画框图再写代码」的习惯。

—— 三亩地 · 案例笔记

静态布局搞定了，下一步加入 JavaScript，去调一个真实的天气 API。

← 上一篇：待办清单下一篇：天气预报小工具 →

或者去小型实战项目继续练 →

个人博客静态站