当前位置：首页 > CSS

css看板制作

2026-02-27 09:26:11CSS

CSS 看板制作方法

使用 Flexbox 布局创建看板

Flexbox 是制作看板的常用方法，适合简单的拖放布局。通过设置 display: flex 和 flex-direction 控制看板的方向。

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

.kanban-column {
  flex: 1;
  min-width: 300px;
  background: #f4f5f7;
  border-radius: 8px;
  padding: 12px;
}

使用 Grid 布局优化看板

CSS Grid 提供更灵活的布局控制，适合复杂的看板结构。通过 grid-template-columns 定义列数和宽度。

.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}

添加卡片样式

看板中的卡片需要清晰的可视化效果，包括阴影、圆角和悬停状态。

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

.kanban-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

实现拖放功能

通过 HTML5 的 Drag and Drop API 实现卡片在不同列之间的移动。需要监听 dragstart、dragover 和 drop 事件。

document.querySelectorAll('.kanban-card').forEach(card => {
  card.draggable = true;
  card.addEventListener('dragstart', handleDragStart);
});

document.querySelectorAll('.kanban-column').forEach(column => {
  column.addEventListener('dragover', handleDragOver);
  column.addEventListener('drop', handleDrop);
});

响应式设计

确保看板在不同屏幕尺寸下都能正常显示，通过媒体查询调整布局。

@media (max-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
}

添加动画效果

使用 CSS 过渡或动画增强用户体验，比如卡片移动时的平滑效果。

.kanban-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kanban-card.dragging {
  opacity: 0.5;
  transform: scale(1.05);
}

完整示例代码

结合 HTML、CSS 和 JavaScript 实现一个基础看板。

css看板制作

<div class="kanban-board">
  <div class="kanban-column">
    <div class="kanban-card" draggable="true">Task 1</div>
    <div class="kanban-card" draggable="true">Task 2</div>
  </div>
  <div class="kanban-column">
    <div class="kanban-card" draggable="true">Task 3</div>
  </div>
</div>

function handleDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
  e.target.classList.add('dragging');
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDrop(e) {
  e.preventDefault();
  const cardId = e.dataTransfer.getData('text/plain');
  const card = document.getElementById(cardId);
  e.target.appendChild(card);
  card.classList.remove('dragging');
}

通过以上方法可以快速实现一个功能完整的 CSS 看板，适用于任务管理、项目跟踪等场景。