卡片设计 HTML CSS

在 Web 开发中，常常需要将内容进行组织并展示在页面上。卡片设计是一种常见的展示方式，能够使内容更有序、更突出。本文将介绍如何使用 HTML 和 CSS 来进行卡片的设计。

HTML 骨架

在 HTML 中，我们可以使用 div 元素来组织我们的卡片。具体来说，我们需要使用以下的 HTML 骨架来创建一张卡片：

<div class="card">
  <img src="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

• div.card：卡片的外边框，我们可以在 CSS 中配置其样式
• img：卡片的图片，根据实际情况决定是否需要在卡片中显示
• div.card-body：卡片的正文部分，可包含标题 (h5.card-title)、内容 (p.card-text)、按钮 (a.btn) 等元素

CSS 样式

在 CSS 中，我们需要对卡片的外边框、图片大小和位置、文本的样式和按钮的样式进行配置。具体的内容如下：

.card {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px #ccc;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1 / span 2;
}

.card .card-body {
  margin-left: 10px;
}

.card h5.card-title {
  margin: 0;
  font-size: 1.3rem;
}

.card p.card-text,
.card a.btn {
  margin: 10px 0;
}

.card a.btn {
  display: inline-block;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

• .card：卡片的整体样式，采用网格布局方式，边框、圆角、内边距和阴影等效果
• img：卡片图片的样式，采用对象适配 (object-fit) 来使图片自适应
• .card-body：卡片正文的样式，设置左边距
• h5.card-title：卡片标题样式，设置字号和外边距
• p.card-text：卡片内容样式，设置外边距
• a.btn：卡片中按钮的样式，设置圆角、背景色和字体颜色等

小结

通过上述 HTML 和 CSS 的配置，我们就可以创建简单的卡片。通过更多的样式调整，我们还可以创建更加美观或者具有特色的卡片，以示页面的独特性。