html如何制作卡片布局 卡片式设计实现技巧

<div class="card">
  @@##@@
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description goes here.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
    <a href="#">Learn More</a>
  </div>
</div>

.card {
  width: 300px; /* 设置卡片宽度 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 5px; /* 添加圆角 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  margin: 20px; /* 设置外边距 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.card img {
  width: 100%; /* 图片宽度100% */
  height: auto; /* 高度自适应 */
  display: block; /* 移除图片下方间隙 */
}

.card-content {
  padding: 15px; /* 内容内边距 */
}

.card-content h3 {
  margin-top: 0; /* 移除标题上边距 */
}

.card-content a {
  display: block; /* 链接独占一行 */
  margin-top: 10px; /* 链接上边距 */
  text-decoration: none; /* 移除下划线 */
  color: blue; /* 链接颜色 */
}

.card-container {
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-around; /* 均匀分布卡片 */
}

@media (max-width: 768px) {
  .card {
    width: 100%; /* 在小屏幕上卡片宽度100% */
    margin: 10px 0; /* 调整外边距 */
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.card {
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.card:hover {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 鼠标悬停时改变阴影 */
}