语义 UI 卡类型

语义 UI 是基于语义化 HTML 和 CSS 的 UI 设计理念，旨在通过 HTML 标签语义的正确使用和 CSS 层叠式样式规则的组织来创建直观、易于理解和维护的 UI 代码。卡片式布局是语义 UI 中最常用的布局之一，可以用来展示信息、展示相关元素或组织复杂数据。

卡类型的设计

在语义 UI 中，卡片分为三种类型。分别是基本卡、文本卡和卡片组。每种类型的卡片都有其特定的设计和用途，可以根据具体需求来进行选用。

基本卡

基本卡是最简单的卡片类型，主要用于展示单个元素或数据。其结构简单，包含标题和内容两个块。

<div class="card">
  <h2 class="card-title">标题</h2>
  <div class="card-content">
    <p>内容</p>
  </div>
</div>

文本卡

文本卡常用于展示较为详细的文本信息，可以包含多个段落、图像等元素。

<div class="text-card">
  <h2 class="text-card-title">标题</h2>
  <div class="text-card-content">
    <p>内容...</p>
    <img src="图片地址" alt="图片描述">
    <p>更多内容...</p>
  </div>
</div>

卡片组

卡片组通常用于展示一组相关的信息或元素，例如产品列表、照片集等。每个卡片可以包含任意数量的子元素。

<div class="card-group">
  <div class="card">
    <h2 class="card-title">标题 1</h2>
    <div class="card-content">
      <p>内容...</p>
    </div>
  </div>
  <div class="card">
    <h2 class="card-title">标题 2</h2>
    <div class="card-content">
      <p>内容...</p>
    </div>
  </div>
  <div class="card">
    <h2 class="card-title">标题 3</h2>
    <div class="card-content">
      <p>内容...</p>
    </div>
  </div>
</div>

样式设计

语义 UI 的卡片样式设计依赖于语义化的 HTML 结构和层叠式样式表规则的正确组织。一般来说，卡片设计需要考虑以下几个方面。

大小和间距

卡片的大小和间距需要明确，可以在语义化的 HTML 中使用 padding 和 margin 属性来指定。

.card {
  padding: 20px;
  margin-bottom: 20px;
}

.text-card {
  padding: 20px;
  margin-bottom: 20px;
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.card-group .card {
  padding: 10px;
  margin: 10px;
}

标题和内容样式

卡片的标题和内容需要有明确的样式。一般来说，可以使用不同的字体、颜色和背景色来区分标题和内容。

.card-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.card-content {
  font-size: 16px;
  line-height: 1.5;
}

.text-card-title {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 20px;
}

.text-card-content {
  font-size: 16px;
  line-height: 1.5;
}

.card-group .card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.card-group .card-content {
  font-size: 14px;
}

鼠标悬停效果

当鼠标悬停在卡片上时，可以添加一些微妙的效果，例如改变背景色或投影。

.card:hover,
.text-card:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.card-group .card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

总结

语义 UI 中的卡片类型可以很好地帮助开发人员创建直观、易于理解和维护的 UI 代码。在设计时，需要考虑卡片的大小、间距、标题和内容样式以及鼠标悬停效果。通过正确使用语义化 HTML 和 CSS 层叠式样式规则，可以创建出高效、可维护的卡片样式。