首页 › HTML / CSS › CSS 教程

综合实战：卡片组件

CSS 教程 · 第 12 章 · 5 次浏览

综合本章节知识，制作一个完整的商品卡片组件，融合：盒子模型、Flex 布局、圆角阴影、过渡动画和响应式。

实战要点

  • 卡片使用 border-radius + box-shadow 营造层次；
  • 图片区与文字区用 Flex 纵向排列；
  • 按钮 hover 有上浮和变色过渡；
  • Grid + auto-fill 实现多卡片自适应网格。

代码示例

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6fa; padding: 30px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.card img { width: 100%; height: 160px; object-fit: cover; }
.card-body { padding: 16px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.card-desc { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
.card-price { display: flex; justify-content: space-between; align-items: center; }
.price { color: #ff4757; font-size: 18px; font-weight: 700; }
.buy {
    padding: 6px 18px;
    background: #3b5bdb;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s;
}
.buy:hover { background: #2f4bc4; }
</style>

<div class="grid">
    <div class="card">
        <img src="https://picsum.photos/400/260?random=1" alt="商品图">
        <div class="card-body">
            <div class="card-title">机械键盘</div>
            <div class="card-desc">87 键热插拔，RGB 背光</div>
            <div class="card-price">
                <span class="price">¥299</span>
                <button class="buy">加入购物车</button>
            </div>
        </div>
    </div>
    <div class="card">
        <img src="https://picsum.photos/400/260?random=2" alt="商品图">
        <div class="card-body">
            <div class="card-title">无线鼠标</div>
            <div class="card-desc">静音按键，人体工学</div>
            <div class="card-price">
                <span class="price">¥99</span>
                <button class="buy">加入购物车</button>
            </div>
        </div>
    </div>
    <div class="card">
        <img src="https://picsum.photos/400/260?random=3" alt="商品图">
        <div class="card-body">
            <div class="card-title">显示器支架</div>
            <div class="card-desc">铝合金升降，承重 8kg</div>
            <div class="card-price">
                <span class="price">¥159</span>
                <button class="buy">加入购物车</button>
            </div>
        </div>
    </div>
</div>
📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
color: #333;文字颜色
background: #fff;背景色 / 背景图
font-size: 16px;字号
font-family: Arial;字体
font-weight: bold;字重（加粗）
margin: 10px;外边距（上右下左）
padding: 10px;内边距
border: 1px solid #ccc;边框：粗细 样式 颜色
border-radius: 8px;圆角
width: 100%;宽度
height: 200px;高度
display: flex;弹性布局（现代布局主力）
display: none;隐藏元素
position: relative / absolute / fixed;定位方式
top / left / right / bottom定位偏移
text-align: center;文字水平对齐
line-height: 1.6;行高
overflow: hidden;内容溢出处理
box-shadow: 0 2px 8px rgba(0,0,0,.1);阴影
transition: all .3s;过渡动画
cursor: pointer;鼠标手型
z-index: 10;层叠顺序
max-width: 1200px; margin: 0 auto;容器居中（经典写法）
@media (max-width: 768px) {}响应式断点
:hover鼠标悬停状态
📖 延伸阅读