当前位置：首页 > CSS

css看板制作

2026-02-13 00:48:58CSS

CSS 看板制作方法

使用 Flexbox 布局

通过 Flexbox 可以快速实现看板的横向排列效果。定义一个容器为 display: flex，内部卡片使用 flex-grow 或固定宽度。

.kanban-board {
  display: flex;
  gap: 16px;
  padding: 20px;
  overflow-x: auto;
}

.kanban-column {
  flex: 0 0 300px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 12px;
}

卡片拖拽功能

结合 HTML5 的 Drag and Drop API 实现卡片跨列移动。为卡片添加 draggable="true" 属性，并通过 JavaScript 处理拖拽事件。

.kanban-card {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: grab;
}

.kanban-card.dragging {
  opacity: 0.5;
}

响应式设计

通过媒体查询适应不同屏幕尺寸。在小屏幕下将看板改为垂直堆叠布局。

@media (max-width: 768px) {
  .kanban-board {
    flex-direction: column;
  }
  .kanban-column {
    flex: 1 1 auto;
    width: 100%;
  }
}

视觉层次优化

使用阴影、颜色和间距增强可读性。为不同状态的列添加颜色标识。

.kanban-column.todo {
  border-top: 4px solid #ff6b6b;
}
.kanban-column.in-progress {
  border-top: 4px solid #feca57;
}
.kanban-column.done {
  border-top: 4px solid #1dd1a1;
}

动画效果

添加过渡动画使交互更流畅。卡片移动时使用 transition 属性平滑过渡。

.kanban-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

完整示例结构

HTML 基础结构需配合上述 CSS 使用：

css看板制作

<div class="kanban-board">
  <div class="kanban-column todo">
    <h3>待处理</h3>
    <div class="kanban-card" draggable="true">任务1</div>
  </div>
  <div class="kanban-column in-progress">
    <h3>进行中</h3>
  </div>
  <div class="kanban-column done">
    <h3>已完成</h3>
  </div>
</div>