做一张免费的幼我主页，能够从一个独立的 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 。若是对方要求使用指定颁布目录，就把文件放入该目录 ；若是没有出格要求，通常要让入口文件位于站点根目录 。上传实现后，打开服务分配的接见解址，查抄线上版本的文字、导航和手机排版是否正常 。改完资料后沉新上传同名文件即可更新 。这个模板没有留言表单或服务器法式，适合用作幼我简介、文章集或简历主页的起点 。
