个人主页

项目一：打造你的网上之家

📖知识引入

🏠主页是网站的客厅

客人进门第一眼看到的地方，定下整个网站的气质。清爽还是炫酷、可爱还是酷盖，全看客厅怎么设计。

🧩主页三要素

我是谁（名字+头像）、我做什么（一句话介绍）、去哪儿（导航链接）。三样说清，客人3秒认识你。

✨第一屏定律

不用滚动就能看到的第一屏最金贵！大标题+一句话+头像，3秒内抓住眼球——游客的耐心比你想象的少。

🗺️项目五步流程

想主题→画草图→让AI生成→自己修改→保存查看。以后做任何网页都是这五步，这是你的「万能公式」。

🤖AI项目搭档

把整个需求一次说清楚，让AI先出第一版，你当挑剔的艺术总监提修改意见。一问一改，半天出作品！

💡

主页像客厅：干净、有特色、让人一眼记住主人！

🔍个人主页开工现场

<body>
  <div class="hero">
    <img src="avatar.png" alt="我的头像" class="avatar">
    <h1>我是小明</h1>
    <p>爱编程和画画的初中生</p>
    <nav>
      <a href="#works">作品</a>
      <a href="#hobby">爱好</a>
      <a href="#about">关于我</a>
    </nav>
  </div>
</body>

<style>
  .hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(#e0f2fe, #eff6ff);
  }
  .avatar {
    width: 120px;
    border-radius: 50%;
  }
  nav a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border-radius: 999px;
    text-decoration: none;
  }
</style>

项目一完整流程实录：

📝 第1步：想主题「做一个清新风格的主页，像一张介绍我自己的海报」

✏️ 第2步：画草图（纸上5分钟）
┌──────────────────┐
│      头像  🐱       │
│    我是小明          │
│  爱编程的初中生      │
│ [作品] [爱好] [我]  │
└──────────────────┘

🤖 第3步：告诉AI（提示词）：「个人主页：居中头像占位、大标题『我是小明』、一句话『爱编程和画画的初中生』、三个导航按钮、淡蓝渐变背景、清新风格」

🎨 第4步：迭代「标题字号再大点」「按钮加圆角」

👀 第5步：保存index.html 双击验收，主页落成！🎉

右边就是AI交的货：你的第一个「家」！

🎯小测验

第1题：主页最像家里的哪个地方？

第2题：「第一屏定律」强调什么？

第3题：做网页项目的「万能五步」是？

📝本课知识点

✓主页=网站客厅，定下全站气质
✓三要素：我是谁+做什么+去哪儿
✓首屏3秒定成败
✓万能五步：想画生改看
✓AI出初稿，你当艺术总监

第21课完成！继续探索下一课吧 🚀

🛠️

上一课

第20课

下一课

第22课

🛠️