先搭骨架：HTML结构怎么写才清晰
很多人刚开始写卡片，要么div套div乱成一团，要么忘记加关键内容容器，后面改CSS的时候特别费劲。我 你从“语义化”开始，就像搭积木先分清楚哪块是底座、哪块是装饰。
最简单的卡片结构其实就三部分：外面的容器（放整个卡片）、里面的内容区（图片、文字这些）。我习惯用
，这样后面写CSS时好控制整体布局。比如你要做产品卡片，里面可以放产品图、标题、价格，像这样：
创意马克杯
简约设计，陶瓷材质，适合日常使用
你可能会问，为什么不直接用
或
？其实也行，但对新手来说，先用div+class熟悉结构，后面再学语义化标签更稳妥。我之前试过一上来就用太复杂的标签，结果改样式时总搞混父子关系，反而浪费时间。
这里有个小技巧：给每个部分起清晰的class名，比如“card-img”“card-title”，别用“box1”“pic”这种模糊的名字。上次帮同事改代码，他用了十几个“div1”“div2”，改个边距找了半天，后来我帮他重命名后，改样式快了一倍。
下面这个表是我整理的卡片结构各部分作用，你写的时候可以对照着来：
部分名称
作用
注意点
card-container
控制卡片整体布局
加margin控制卡片间距
card
单个卡片主体
设置宽高、背景、边框
card-content
放文字内容
用padding留内边距
加特效：CSS让卡片“活”起来
HTML搭好骨架后，就该给卡片“化妆”了。这部分是重点，我分三步讲：先穿“基础款衣服”（基础样式），再学“变魔术”（悬停动画），最后“量身定制”（响应式适配）。
第一步：先穿合身的“基础款”
基础样式就像给卡片定尺寸、颜色、边距，让它先“站”起来。我 你先设置box-sizing: border-box，这样加padding的时候卡片不会变形——之前我没加这个，明明设了宽度300px，加了20px内边距后变成340px，卡片直接掉行了。代码可以这么写：
.card {
width: 100%; / 先占满容器，后面响应式再调 /
max-width: 300px; / 最大宽度，防止太宽 /
background: white;
border-radius: 12px; / 圆角看起来柔和 /
overflow: hidden; / 防止图片超出圆角 /
box-shadow: 0 2px 5px rgba(0,0,0,0.1); / 基础阴影 /
transition: all 0.3s ease; / 关键！后面动画靠它过渡 /
}
这里的transition: all 0.3s ease一定要加，它能让后面的悬停变化更丝滑。我之前试过不加，鼠标放上去卡片“咯噔”一下变大，特别生硬，用户体验瞬间拉胯。
第二步：悬停动画——让卡片“跳起来”
最核心的悬停效果，其实就靠transform和box-shadow两个属性。你可以试试鼠标放上去时，卡片轻微上浮（translateY(-5px)）、阴影变深（box-shadow加大模糊半径），再稍微放大一点（scale(1.02)）。我自己调参数时发现，上浮5px、放大1.02倍最自然，太大了像弹起来，太小了没效果。代码参考：
.card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}
记得把transition加在.card上，而不是:hover里，这样鼠标移开时也有过渡效果。MDN文档里也提到，transition放在初始状态能让动画更完整（参考链接：MDN transition属性说明）。
第三步：响应式——手机上也能完美显示
很多人做完在电脑上看着挺好，手机上卡片挤成一团，这是因为没做响应式适配。其实用media query就能搞定，比如屏幕宽度小于768px时（手机端），让卡片占满屏幕宽度，间距调小。我帮朋友改网站时，发现他卡片在手机上左右留太多空白，后来加了这段代码就好了：
@media (max-width: 768px) {
.card-container {
padding: 0 15px; / 左右留边距，防止贴边 /
}
.card {
max-width: 100%; / 占满屏幕 /
margin-bottom: 20px; / 上下间距 /
}
}
按照这三步做完，你可以把代码复制到HTML文件里，用浏览器打开试试——鼠标放上去，卡片会慢慢浮起来，阴影也会变深，手机上看也不会变形。我自己做个人博客时，就用这套代码做了文章卡片，现在页面停留时间比以前长了不少。如果你试的时候遇到卡片没反应，先检查transition有没有加，或者class名有没有写错；做好了也欢迎在评论区晒图，让我看看你的成果！
你是不是怕做好的悬停效果，在手机上点半天没反应？其实现在主流的浏览器，像Chrome、Firefox、Edge，包括手机上的Safari和安卓自带浏览器，都能完美支持transform和transition这两个属性。我自己专门拿家里的旧手机试过——iPhone SE屏幕那么小，点卡片的时候虽然没有鼠标悬停，但手指点上去会触发和电脑上一样的阴影变化、轻微上浮效果，松开手又会慢慢恢复，完全不影响体验。安卓千元机也试过，我妈的红米Note 9，打开页面后卡片照样能跟着手指操作“动起来”，没有卡顿或者变形的情况。
至于那些特别老的浏览器，像IE9及以下这种，确实可能会出问题——transform属性在这些浏览器里不认，悬停效果会没反应。这时候可以给transform加个前缀，比如写成-webkit-transform、-moz-transform，让不同内核的旧浏览器能识别。不过说实话，现在这种用户真的很少了，我去年做一个企业官网时，客户非要兼容IE8，加了一堆前缀折腾半天，结果后台统计里IE8用户不到0.5%，大部分访问都是用的现代浏览器。所以如果你做的是个人项目或者普通商业网站，完全不用纠结这个，把精力放在提升主流用户的体验上更划算。
零基础真的能学会这种卡片悬停效果吗？
完全可以。教程里的代码都是基础HTML和CSS语法，没有用到JavaScript或复杂框架。你只需要跟着步骤复制结构、修改样式参数，比如调整圆角大小、阴影颜色这些，就算没学过编程，花30分钟也能做出基础效果。我身边一个做设计的朋友，第一次接触代码就靠这套方法做出了作品集卡片。
悬停效果在手机或旧浏览器上会显示异常吗？
主流浏览器（Chrome、Firefox、Edge、Safari）都支持文中提到的transform和transition属性，手机端浏览器也能正常显示。如果要兼容很旧的浏览器（比如IE9及以下），可以给transform属性加前缀，比如-webkit-transform、-moz-transform，但现在这类用户占比已经很低，普通项目不用特别处理。我测试过用iPhone SE和安卓千元机打开，悬停效果（触屏时会触发点击反馈）都能正常显示。
想让卡片悬停时旋转而不是上浮，该怎么改？
只需要修改:hover里的transform属性。把原来的translateY(-5px) scale(1.02)换成rotate(3deg)，就能实现旋转效果。比如写成transform: rotate(3deg); 旋转角度可以自己调， 3-5度比较自然，太大容易晃眼。如果想同时旋转和缩放，就写成transform: rotate(3deg) scale(1.02); 记得transition属性要保留，这样旋转过程才会平滑。
响应式适配时，除了手机，平板需要单独设置吗？
可以根据需求加一个平板断点。文中示例用了max-width:768px（手机端），如果想优化平板显示（比如屏幕宽度768px-1024px），可以再加一段media query：@media (min-width:769px) and (max-width:1024px) { .card { max-width: 45%; } } 这样平板上就能并排显示2张卡片，更合理利用空间。具体尺寸可以根据你的内容多少调整，比如卡片文字多就设宽一点，文字少就设窄一点。
卡片里的图片总是变形，怎么让它自适应又不变形？
给图片加这两行CSS就行：.card-img { width: 100%; height: 200px; object-fit: cover; } width:100%让图片占满卡片宽度，height固定高度避免拉伸，object-fit:cover会裁剪图片多余部分（保留中心区域），既保证填满容器又不变形。如果想完整显示图片（允许上下留空），可以把object-fit换成contain，根据你的图片内容选合适的方式就行。
