第一个网站：用纯 HTML + CSS 做个个人主页
从第 1 篇到第 11 篇，我们已经认识了 HTML 标签、CSS 布局、JavaScript 交互——但一直缺一个完整的落地成果。理论再多，不如一行能跑起来的代码。今天就用纯 HTML 和 CSS 搭一个个人主页，把之前学的东西串起来。
先搭 HTML 骨架
任何网页都是一份 HTML 文件。白物集的每个页面都从 BaseLayout.astro 这个骨架模板开始——它声明了 <!doctype html>、<meta charset="UTF-8">、视口设置，然后引入全局样式和导航栏。
仿照这个思路，个人主页的 HTML 骨架只需要几行：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>张三 · 个人主页</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header><!-- 导航 --></header>
<main><!-- 内容 --></main>
<footer><!-- 版权 --></footer>
</body>
</html>
白物集实际项目中 BaseLayout.astro 第 34-38 行就是完全相同的结构——先 <!doctype html>，再 <html lang="zh-CN">，然后 <head> 里声明编码、视口、标题。这是一个在任何项目中都不会变的标准起点。
内容结构：三个区域
白物集的页面结构可以拆成三个逻辑区域：导航栏（NavBar.astro）、主内容区（每个页面各自的 body）、页脚。个人主页也按这个分区。
Header — 导航加自我介绍
<header>
<nav>
<a href="#about">关于我</a>
<a href="#projects">项目</a>
<a href="#contact">联系</a>
</nav>
<div class="hero">
<h1>你好，我是张三</h1>
<p>前端开发者 · 独立创作者</p>
</div>
</header>
白物集 NavBar.astro 第 31 行用 menu-horizontal 把导航项水平排列，第 33 行通过 items.map() 循环渲染链接。咱们这里链接少，直接手写三个 <a> 标签更直观。
Main — 展示内容
<main>
<section id="about">
<h2>关于我</h2>
<p>专注 Web 开发，热爱开源和设计。</p>
</section>
<section id="projects">
<h2>项目</h2>
<div class="project-card">
<h3>白物集</h3>
<p>AI · Apple · 科技前沿内容平台</p>
</div>
</section>
</main>
白物集首页（index.astro 第 11-29 行）就是按频道区块组织内容的：AI 频道取 3 篇、Apple 频道取 3 篇、科技频道取 3 篇，每个区块独立渲染。个人主页也按「关于我」「项目」「联系」三个区块来组织，结构一致。
Footer — 版权信息
<footer>
<p>© 2026 张三 · 用 ❤️ 搭建</p>
</footer>
白物集的 footer（site.config.ts 第 39-43 行）包含品牌 tagline、微信名、邮箱、版权声明。个人主页不需要这么多信息，留一个版权声明就够了。
加 CSS 让它好看
HTML 骨架搭好了，但默认样式很原始。接下来用 CSS 让它看起来像一个真正的个人主页。
全局重置 — 清除浏览器默认间距
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
白物集 global.css 依托 Tailwind 的 @import "tailwindcss"（第 2 行）做全局重置。如果不用框架，上面三行就是最基础的自定义重置，把浏览器自带的 8px body margin 清掉。
配色和字体 — 定义品牌感
:root {
--primary: #0A84FF;
--bg: #ffffff;
--text: #1d1d1f;
--text-muted: #6e6e73;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
白物集的 global.css 第 11-31 行定义了完整的 Design Token 体系，包括品牌色 --brand-primary: #0A84FF、语义色 --text-primary、--text-secondary、--text-muted 等。个人主页不需要这么多，但保留「用 CSS 变量管理颜色」这个思路——以后改主题色只需改一个地方。
白物集 site.config.ts 第 30 行的 logoAccent: '#0A84FF' 也是同一个原则：品牌色集中定义，各处引用。
排版 — 内容居中
header, main, footer {
max-width: 680px;
margin: 0 auto;
padding: 40px 20px;
}
用 max-width 限制内容宽度（而不是固定 width），用 margin: 0 auto 水平居中——这是 CSS 里最常用的页面居中模式。白物集首页 index.astro 第 36 行的 padding: 60px 20px 也是靠父容器的 max-width 控制宽度。
导航栏 — flex 水平排列
nav {
display: flex;
gap: 24px;
justify-content: center;
margin-bottom: 80px;
}
nav a {
color: var(--text-muted);
text-decoration: none;
}
nav a:hover {
color: var(--primary);
}
白物集 NavBar.astro 第 31-37 行用 daisyUI 的 navbar-center + menu-horizontal 实现导航栏。这里用原生 display: flex 实现同样效果，原理是一样的——Flex 让子元素水平排列，gap 控制间距。
Hero 区块 — 垂直居中
.hero {
text-align: center;
margin-bottom: 80px;
}
.hero h1 {
font-size: 2.5rem;
font-weight: 700;
}
.hero p {
color: var(--text-muted);
margin-top: 8px;
}
白物集首页的 hero 区块（index.astro 第 36 行 text-align:center）也用相同的方式让标题和描述居中。
卡片组件 — 圆角 + 阴影
.project-card {
padding: 24px;
border-radius: 12px;
background: #f5f5f7;
margin-top: 16px;
}
.project-card h3 {
margin-bottom: 6px;
}
白物集首页虽然没有直接写卡片，但 global.css 第 21 行的 --bg-card: #16161a 和文章详情页面的 <article> 样式都是卡片模式——白背景、内边距、圆角。个人主页的卡片保持了同样风格。
完整效果
全部代码就两个文件：index.html 和 style.css。不需要框架，不需要构建工具，浏览器双击打开就能看到页面。这也是白物集 404 页面（404.astro）的做法——整个页面只用了 HTML + CSS，没有 JS 依赖，13 行模板就渲染了一个「页面未找到」的完整页面。
从这个起点出发，你可以用同样的结构去搭建博客、作品集、甚至创业项目的落地页。下一篇文章会在此基础上，回答一个更实际的问题：当网站页面多了（比如到了 20 个），为什么需要框架来管理它们？ 我们会用白物集选择 Astro 的真实决策过程来拆解。