CSS每日一练：打造精美卡片列表的完整指南

<!-- 卡片列表容器 -->
<div class="card-container">
  <!-- 单个卡片示例 -->
  <div class="card">
    <h3 class="card-title">卡片标题</h3>
    <div class="card-content">
      <p>这里是卡片内容描述，展示主要信息...</p>
    </div>
    <div class="card-footer">
      <span>附加信息</span>
    </div>
  </div>
</div>

/* 基础卡片样式 - 提供视觉层次和交互反馈 */
.card {
  background: #fff;                      /* 纯白背景提升可读性 */
  border-radius: 8px;                    /* 圆角设计更友好 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* 柔和阴影增加深度 */
  padding: 24px;                         /* 内边距保证呼吸空间 */
  margin-bottom: 20px;                   /* 卡片间距 */
  transition: all 0.3s ease;             /* 平滑过渡动画 */
  border: 1px solid #eee;                /* 细边框作为阴影备用 */
}

/* 悬停效果 - 增强用户交互体验 */
.card:hover {
  transform: translateY(-5px);           /* 轻微上浮效果 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 悬停时阴影加深 */
}

/* 响应式网格布局 - 自动适应不同屏幕尺寸 */
.card-container {
  display: grid;                         /* 使用CSS Grid布局 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列 */
  gap: 24px;                             /* 卡片间距 */
  padding: 20px;                         /* 容器内边距 */
  max-width: 1200px;                     /* 最大宽度限制 */
  margin: 0 auto;                        /* 水平居中 */
}

/* 卡片标题样式 - 突出主要内容 */
.card-title {
  font-size: 1.3rem;                     /* 适当放大字号 */
  margin-bottom: 12px;                   /* 标题与内容间距 */
  color: #222;                           /* 深色文字提高可读性 */
  font-weight: 600;                      /* 中等字重 */
}

/* 卡片内容样式 - 保证良好的阅读体验 */
.card-content {
  color: #555;                           /* 中等灰度文字 */
  line-height: 1.7;                      /* 宽松的行高 */
  font-size: 0.95rem;                    /* 略小于基础字号 */
}

/* 卡片页脚样式 - 次要信息展示 */
.card-footer {
  margin-top: 18px;                      /* 与内容区间距 */
  padding-top: 12px;                     /* 上内边距 */
  border-top: 1px solid #f0f0f0;         /* 细分割线 */
  font-size: 0.85rem;                    /* 较小字号 */
  color: #888;                           /* 浅色文字表示次要信息 */
  display: flex;                         /* 灵活布局 */
  justify-content: space-between;        /* 两端对齐 */
}

/* 响应式调整 - 移动端适配 */
@media (max-width: 600px) {
  .card-container {
    grid-template-columns: 1fr;          /* 单列布局 */
    gap: 16px;                           /* 减小间距 */
    padding: 12px;                       /* 减小内边距 */
  }

  .card {
    padding: 18px;                       /* 减小卡片内边距 */
  }
}

进阶设计技巧

图片优化处理

.card-image {
width: 100%;                          /* 充满容器宽度 */
height: 180px;                        /* 固定高度 */
object-fit: cover;                    /* 保持比例裁剪 */
border-radius: 6px 6px 0 0;           /* 仅圆角上方 */
margin-bottom: 16px;                  /* 图片与内容间距 */
}

暗黑模式支持

@media (prefers-color-scheme: dark) {
.card {
background: #2d2d2d;                /* 深色背景 */
border-color: #444;                 /* 深色边框 */
}
.card-title { color: #f0f0f0; }       /* 浅色文字 */
.card-content { color: #ccc; }        /* 中等浅色 */
.card-footer { 
border-color: #444;                 /* 深色分割线 */
color: #aaa;                        /* 浅灰色文字 */
}
}

加载状态动画

/* 骨架屏加载效果 */
.card-loading {
animation: pulse 1.5s infinite;       /* 脉冲动画 */
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
}
@keyframes pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

多主题支持

/* 通过CSS变量实现主题切换 */
.card {
--card-bg: #fff;
--card-text: #333;
--card-shadow: 0 2px 10px rgba(0,0,0,0.08);

background: var(--card-bg);
color: var(--card-text);
box-shadow: var(--card-shadow);
}
.theme-dark {
--card-bg: #2d2d2d;
--card-text: #f0f0f0;
--card-shadow: 0 2px 10px rgba(0,0,0,0.3);
}