做一张免费的个人主页，可以从一个独立的 index.html 文件开始：先准备个人介绍、作品和联系方式，再编写 HTML 与 CSS，接着用浏览器检查，最后上传到静态网站空间。下面的模板包含自我介绍、作品卡片、导航定位和邮箱联系，可直接复制修改。代码本身不收费；托管服务的免费额度、域名和流量规则，则要以服务方说明为准。
第一步：准备主页资料
先写下访客打开主页时需要看到的资料：姓名或昵称、职业或兴趣、擅长的技能、代表作品，以及希望公开的联系方式。每个作品最好说明项目名称、自己完成的工作和使用的工具。例如，设计师可以展示海报或界面，学生可以展示课程项目，摄影爱好者可以展示照片主题。示例中的林溪、作品名称和邮箱都应替换成你自己的资料。
第二步：创建并编写 HTML 文件
打开电脑自带的文本编辑器，新建文件并粘贴下方代码。保存文件时，将文件名设为 index.html，编码选 UTF-8。模板把 CSS 放在 HTML 文件内部，不需要另外准备样式表或图片；导航可以定位到“关于我”“近期作品”和“联系我”三个区块，窄屏时作品卡片会从两列改为一列。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>林溪的个人主页</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
color: #243247;
background: #f4f7fb;
font-family: Arial, "Microsoft YaHei", sans-serif;
line-height: 1.7;
}
header, main, footer { width: min(900px, 90%); margin: auto; }
header { padding: 48px 0 24px; }
nav { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
a { color: #2864c5; text-decoration: none; }
section {
margin: 20px 0;
padding: 24px;
background: #fff;
border-radius: 14px;
}
.projects {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.card { padding: 16px; background: #f4f7fb; border-radius: 10px; }
footer { padding: 24px 0 40px; color: #68758a; }
@media (max-width: 600px) {
header { padding-top: 30px; }
section { padding: 18px; }
.projects { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<p>个人主页 · Portfolio</p>
<h1>你好，我是林溪</h1>
<p>一名喜欢设计与前端开发的学习者，正在把想法做成简单、实用的作品。</p>
<nav>
<a href="#about">关于我</a>
<a href="#works">作品</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<p>我关注网页排版、用户体验和轻量化开发。平时通过小项目练习，把复杂内容整理成清楚易读的界面。</p>
<p>擅长：HTML、CSS、界面设计、文字整理</p>
</section>
<section id="works">
<h2>近期作品</h2>
<div class="projects">
<article class="card">
<h3>阅读清单</h3>
<p>用分类卡片整理书目，练习信息层级与自适应排版。</p>
</article>
<article class="card">
<h3>旅行手记</h3>
<p>记录路线和沿途见闻，用简洁文字讲述一次旅行。</p>
</article>
</div>
</section>
<section id="contact">
<h2>联系我</h2>
<p>欢迎交流项目与创意：<a href="mailto:[email protected]">[email protected]</a></p>
</section>
</main>
<footer>林溪 · 个人主页</footer>
</body>
</html>第三步：替换个人资料并调整样式
把示例中的“林溪”换成自己的姓名或昵称，并改写自我介绍、技能、作品名称和邮箱。浏览器标签上显示的名称由 <title> 控制，也要一并修改。若暂时没有作品，可以删除整个 <section id="works"> 区块；新增项目时，复制一个 <article class="card"> 卡片，再替换标题和说明。
颜色与间距集中在代码的 CSS 部分：修改 background 可以更换背景色，调整 padding 可以改变区块留白；主体最大宽度由 width: min(900px, 90%) 控制。保留 @media 中的窄屏规则，手机打开时作品就会自动改为单列。发布前也可以删去不想公开的个人资料，尤其是私人邮箱或住址。
第四步：本地预览并检查
保存 index.html 后，双击文件，用浏览器打开。先确认姓名、介绍和作品卡片显示正确，再依次点击导航中的“关于我”“作品”“联系”，检查浏览器是否跳到对应区块。将窗口缩窄，观察文字有没有超出屏幕、卡片是否变成单列。若中文乱码，重新保存并确认编码为 UTF-8；若导航没有定位效果，检查导航中的 #works 是否与作品区块的 id="works" 完全一致。点击邮箱时，系统会尝试打开默认邮件程序。
第五步：上传并发布
选择提供免费静态网页托管额度的服务，按服务方的说明创建站点并上传 index.html。如果对方要求使用指定发布目录，就把文件放入该目录；如果没有特别要求，通常要让入口文件位于站点根目录。上传完成后，打开服务分配的访问地址，检查线上版本的文字、导航和手机排版是否正常。改完资料后重新上传同名文件即可更新。这个模板没有留言表单或服务器程序，适合用作个人简介、作品集或简历主页的起点。
