第23课：作品集页面
进度 0/30
💼
作品集页面
项目三：展示你的高光时刻
📖知识引入
💼作品集是荣誉馆
编程作品、绘画、作文、比赛奖状、手工模型……你骄傲的一切都能展出。它是你的「实力证明」，比成绩单更立体。
🃏卡片式布局
每个作品一张卡片：封面图+标题+一句话介绍。卡片排成整齐的网格，像画廊挂画——这是作品集的标准姿势。
🔗卡片要能点
点开看大图、跳转看详情、链接到源码。展览馆不能只让看不让进——每张卡片都通向一个「深度展厅」。
⭐精选不贪多
只放最好的3-6个作品！100个平庸作品的仓库，不如5个精品的展览馆——宁缺毋滥是策展第一定律。
🤖AI策展人
把作品清单发给AI：「帮我设计一个高级感的作品集页面」，AI连排版、配色、悬停效果一起出——你只管挑作品！
💡
作品集是展览馆不是仓库：精选最好的，而不是堆最多的！
🔍作品集布展方案
<h1>我的高光时刻</h1>
<div class="grid">
<a class="card" href="works/snake.html">
<img src="snake.png" alt="贪吃蛇游戏截图">
<h3>贪吃蛇游戏</h3>
<p>用JS写的，全班抢着玩</p>
</a>
<a class="card" href="works/math.html">
<img src="math.png" alt="数学竞赛奖状">
<h3>数学竞赛三等奖</h3>
<p>2025年校级数学竞赛</p>
</a>
<a class="card" href="works/cat.html">
<img src="cat.png" alt="猫咪图鉴网站截图">
<h3>猫咪图鉴网站</h3>
<p>我的第一个网站作品</p>
</a>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: white;
border-radius: 16px;
padding: 16px;
transition: transform 0.3s;
text-decoration: none;
color: #333;
}
.card:hover {
transform: translateY(-6px);
}
</style>作品集页面的布局蓝图：
「小明的高光时刻」 <- h1标题
┌─────┐ ┌─────┐ ┌─────┐ │ 贪吃 │ │ 数学 │ │ 猫咪 │ │ 蛇 │ │ 竞赛 │ │ 图鉴 │ │ 游戏 │ │ 三等奖│ │ 网站 │ └─────┘ └─────┘ └─────┘ ┌─────┐ ┌─────┐ │ 水彩 │ │ 校园 │ │ 画集 │ │ 摄影集│ └─────┘ └─────┘
每张卡片：
· 封面图（作品截图/照片）
· 标题（贪吃蛇游戏）
· 一句话（用JS写的，全班抢着玩）
· 点击→进入详情
悬停效果：卡片轻轻上浮
→「这张卡片可以点哦！」
右边代码：CSS网格布局， 三列卡片自动排—— 布展原来这么简单！
🎯小测验
第1题：作品集页面最常用的布局方式是？
第2题：作品集应该怎么选作品？
第3题：作品卡片上一般不放什么？
📝本课知识点
- ✓作品集=你的荣誉展览馆
- ✓卡片式网格是标准布局
- ✓卡片要能点进详情
- ✓精选3-6个，宁缺毋滥
- ✓AI帮你排版配色一条龙
第23课完成！继续探索下一课吧 🚀