如何创建类似拼图块样式的Container组件？求技术实现帮助

DevOps 小满

2026-8-16

实现指定样式的Container组件方案

根据你提供的样式图，这个Container组件包含顶部标题栏、内容展示区和底部操作栏，下面是基于HTML+CSS的实现方案：

1. HTML结构

<div class="container-card">
  <!-- 顶部标题栏 -->
  <div class="card-header">
    <span class="header-icon">📋</span>
    <span class="header-title">表单标题</span>
  </div>
  <!-- 内容区域 -->
  <div class="card-content">
    <p>这里是容器的内容区域，可以放置表单、文本或其他组件</p>
  </div>
  <!-- 底部操作栏 -->
  <div class="card-footer">
    <button class="btn btn-secondary">取消</button>
    <button class="btn btn-primary">确认</button>
  </div>
</div>

2. CSS样式

/* 基础容器样式 */
.container-card {
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* 顶部标题栏 */
.card-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.header-icon {
  font-size: 18px;
}

/* 内容区域 */
.card-content {
  padding: 20px 16px;
  min-height: 150px;
  color: #555;
}

/* 底部操作栏 */
.card-footer {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 6px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

.btn-primary {
  background-color: #2196f3;
  color: white;
}

.btn:hover {
  opacity: 0.9;
}