如何通过css框架Semantic UI制作卡片组件-css教程-PHP中文网

如何通过css框架Semantic UI制作卡片组件

P粉602998670

发布： 2025-09-23 13:30:01

原创

357人浏览过

答案：使用Semantic UI可通过预定义类快速构建卡片，支持自定义样式、响应式布局及高级功能。通过覆盖CSS或使用主题可自定义样式；结合网格系统、媒体查询实现响应式；支持卡片组、堆叠、翻转及动态数据渲染等高级用法。

如何通过css框架semantic ui制作卡片组件

使用 Semantic UI 框架制作卡片组件，核心在于利用其预定义的 CSS 类名，快速搭建结构并实现美观的样式。它简化了卡片组件的创建过程，无需从零开始编写大量的 CSS 代码。

解决方案

Semantic UI 的卡片组件由多个部分组成，每个部分都有对应的类名。以下是一个基本的卡片组件实现：

<div class="ui card">
  <div class="image">
    <img src="/images/avatar2/large/molly.png">
  </div>
  <div class="content">
    <a class="header">Molly Brown</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Molly is a personal assistant living in Paris.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

登录后复制

这段代码创建了一个包含图像、标题、元数据、描述和额外内容的卡片。ui card 类定义了卡片的基本样式，而其他类（如 image、content、header、meta、description、extra content）则分别定义了卡片各个部分的样式。

立即学习“前端免费学习笔记（深入）”；

如何自定义 Semantic UI 卡片组件的样式？

Semantic UI 允许通过覆盖默认的 CSS 样式来定制卡片组件。例如，可以修改卡片的颜色、字体、边框等。

覆盖 CSS 类: 在自己的 CSS 文件中，针对 Semantic UI 的类名编写新的样式规则。确保你的 CSS 文件在 Semantic UI 的 CSS 文件之后加载，这样你的样式才能覆盖默认样式。例如：
```
.ui.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 添加阴影 */
  transition: 0.3s; /* 添加过渡效果 */
}

.ui.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影效果 */
}
```
登录后复制
使用 Semantic UI 的主题: Semantic UI 允许创建和使用主题。通过修改主题变量，可以全局性地改变组件的样式。这需要对 Semantic UI 的主题机制有一定的了解。
使用 !important 规则（不推荐，但有时必要）: 如果覆盖样式无效，可以尝试使用 !important 规则。但这应该作为最后的手段，因为它会使 CSS 维护变得更加困难。

如何让 Semantic UI 卡片组件响应式？

Semantic UI 本身就具有一定的响应式特性。但为了更好地适应不同的屏幕尺寸，可能需要进行额外的调整。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

使用 Semantic UI 的网格系统: 将卡片放置在 Semantic UI 的网格系统中，可以使其自动适应不同的屏幕尺寸。
```
<div class="ui grid">
  <div class="four wide column">
    <div class="ui card">
      ...
    </div>
  </div>
  <div class="four wide column">
    <div class="ui card">
      ...
    </div>
  </div>
  ...
</div>
```
登录后复制
在这个例子中，每个卡片占据网格的四分之一宽度。当屏幕尺寸减小时，卡片会自动换行。
使用 CSS 媒体查询: 使用 CSS 媒体查询可以针对不同的屏幕尺寸应用不同的样式。
```
@media (max-width: 768px) {
  .ui.card {
    width: 100%; /* 在小屏幕上占据 100% 宽度 */
  }
}
```
登录后复制
使用 Semantic UI 的响应式类名: Semantic UI 提供了一些响应式类名，可以根据屏幕尺寸显示或隐藏元素。例如，mobile hidden 类可以在移动设备上隐藏元素。

Semantic UI 卡片组件有哪些高级用法？

除了基本的卡片组件，Semantic UI 还支持一些高级用法，例如：

卡片组: 可以使用 ui cards 类将多个卡片组合在一起。

<div class="ui cards">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

登录后复制

堆叠式卡片: 可以使用 stacked 类创建堆叠式卡片。
```
<div class="ui stacked card">
  ...
</div>
```
登录后复制
翻转卡片: 可以使用 JavaScript 和 CSS 实现卡片的翻转效果，显示更多信息。这需要一些额外的编程工作。

使用 API 数据动态生成卡片： 结合 JavaScript 和 Semantic UI，可以通过 API 获取数据，并动态生成卡片组件。例如，使用 fetch API 获取 JSON 数据，然后循环遍历数据，创建对应的卡片元素，并添加到页面中。

fetch('https://example.com/api/users')
  .then(response => response.json())
  .then(data => {
    const cardContainer = document.querySelector('.ui.cards');
    data.forEach(user => {
      const card = document.createElement('div');
      card.classList.add('ui', 'card');
      card.innerHTML = `
        <div class="content">
          <div class="header">${user.name}</div>
          <div class="description">${user.bio}</div>
        </div>
      `;
      cardContainer.appendChild(card);
    });
  });

登录后复制

这段代码展示了如何从 API 获取用户数据，并使用这些数据动态创建 Semantic UI 卡片。

以上就是如何通过css框架Semantic UI制作卡片组件的详细内容，更多请关注php中文网其它相关文章！