html函数如何构建卡片式布局 html函数div容器的灵活运用

<div class="card">
  <img src="image.jpg" alt="卡片图片" class="card-img">
  <div class="card-body">
    <h3 class="card-title">卡片标题</h3>
    <p class="card-text">这里是简短的描述内容。</p>
    <button class="card-btn">查看详情</button>
  </div>
</div>

.card-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.card {
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px;
}

function createCard(title, text, imgSrc) {
  return `
    <div class="card">
      <img src="${imgSrc}" alt="${title}">
      <div class="card-body">
        <h3>${title}</h3>
        <p>${text}</p>
        <button>查看详情</button>
      </div>
    </div>
  `;
}

// 调用“函数”插入到页面
document.querySelector('.card-container').innerHTML += createCard(
  'JavaScript 入门',
  '学习 JS 基础语法与应用。',
  'js-book.jpg'
);

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  transition: all 0.3s;
}