css 怎么制作窗体

使用CSS制作窗体

在CSS中制作窗体通常指的是创建具有窗口样式的UI元素，如对话框、弹出框或卡片。以下是几种常见的实现方法：

基础窗体结构

HTML部分通常需要一个容器元素：

<div class="window">
  <div class="title-bar">标题</div>
  <div class="content">
    窗体内容
  </div>
</div>

CSS样式可以这样设置：

.window {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.title-bar {
  background: #f0f0f0;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.content {
  padding: 15px;
  background: white;
}

可拖动窗体

要使窗体可拖动，需要结合JavaScript：

const windowElement = document.querySelector('.window');
const titleBar = document.querySelector('.title-bar');

titleBar.addEventListener('mousedown', (e) => {
  const startX = e.clientX;
  const startY = e.clientY;
  const startLeft = parseInt(windowElement.style.left || '0');
  const startTop = parseInt(windowElement.style.top || '0');

  function moveWindow(e) {
    windowElement.style.left = (startLeft + e.clientX - startX) + 'px';
    windowElement.style.top = (startTop + e.clientY - startY) + 'px';
  }

  document.addEventListener('mousemove', moveWindow);
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', moveWindow);
  });
});

模态窗体

创建模态窗体需要添加遮罩层：

<div class="modal-overlay">
  <div class="modal-window">
    <div class="modal-header">标题</div>
    <div class="modal-body">内容</div>
    <div class="modal-footer">
      <button>关闭</button>
    </div>
  </div>
</div>

CSS样式：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-window {
  background: white;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.3);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px;
  border-top: 1px solid #eee;
  text-align: right;
}

窗体动画效果

为窗体添加显示/隐藏动画：

.modal-window {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

响应式窗体

确保窗体在不同屏幕尺寸下都能正常显示：

@media (max-width: 600px) {
  .modal-window {
    width: 95%;
    margin: 10px;
  }
}

这些方法可以组合使用，根据具体需求创建不同风格的窗体效果。