项目卡片优化关键在语义结构、响应式控制与交互反馈：用article替代div包裹，标题用h2/h3，图片容器设aspect-ratio，文字截断用-webkit-line-clamp，卡片整体设cursor:pointer和hover/focus反馈，并规范链接rel属性。
项目卡片不是堆砌样式就能好看，关键在结构语义清晰、响应及时、点击区域合理——否则移动端点不到、屏幕阅读器读不准、CSS一改全崩。
用 article 而不是 div 包裹卡片内容
很多人直接用 div 套一堆 span 和 img，但项目卡片本质是独立的内容单元，article 才是语义正确的容器。浏览器和辅助工具会据此识别内容边界，SEO 也更友好。
- 错误写法：
<div class="card">...</div> - 推荐写法：
<article class="project-card">...</article> - 内部标题必须用
h3或更高级别（如卡片是页面主内容之一，可用h2），不能全用div模拟标题 - 如果卡片带链接，把整个
article包进a标签里（注意：a里放块级元素需设display: block）
aspect-ratio 控制图片区域不变形，别只靠 object-fit
仅设 object-fit: cover 会让不同尺寸图强行裁剪，用户上传横图/竖图时卡片高度忽高忽低。必须配合容器级宽高约束。
- 给图片外层容器（比如
.project-card__thumb）加：aspect-ratio: 16 / 9 - 再设
img { width: 100%; height: 100%; object-fit: cover; } - 不支持
aspect-ratio的旧浏览器（如 IE、旧版 Safari）可降级为 padding-top 百分比技巧，但优先保现代写法 - 避免对
img直接设固定height，否则响应式断点里容易溢出或留白
文字截断用 line-clamp 而非 JS 计算字符数
项目描述常需限制 2 行，用 JS 动态截字符串既慢又难适配字体缩放和多语言宽度。CSS 原生方案更稳。
- 必须同时设置：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 父容器不能有
flex或grid的隐式min-height: auto干扰（常见于display: flex卡片布局中），需显式加min-height: 0 - 不要用
text-overflow: ellipsis配合white-space: nowrap——那只能单行截断 - 若需兼容不支持
-webkit-line-clamp的环境（如某些安卓 WebView），备用方案是服务端预截 + 后缀省略号，而非客户端 JS
交互反馈要落在卡片整体，而非仅按钮上
用户习惯点击卡片任意位置跳转详情页，但很多实现只给「查看详情」按钮加 hover/focus 样式，导致其他区域无反馈，体验割裂。
- 给
.project-card设cursor: pointer和transition: transform 0.2s, box-shadow 0.2s - hover 时用
transform: translateY(-2px)微抬升，比单纯加阴影更轻量且不挤占布局空间 - 焦点状态（键盘 Tab 进入）必须和 hover 一致，且确保
:focus-visible可见（别用outline: none乱删） - 禁用状态（如项目已归档）应灰掉整个卡片，包括图片、标题、描述，而不仅是按钮
最易被忽略的是卡片内链接的 target 和 rel 属性：外部项目链接务必加 rel="noopener noreferrer"，内部链接避免意外新开 tab；这些细节不写进 HTML，光靠 CSS 再漂亮也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
