css制作工牌

使用CSS制作工牌

工牌通常包含员工姓名、职位、公司标志等信息。以下是使用HTML和CSS制作工牌的几种方法。

基本工牌结构

HTML部分可以这样设计：

<div class="id-card">
  <div class="company-logo"></div>
  <div class="employee-photo"></div>
  <div class="employee-info">
    <h3>员工姓名</h3>
    <p>职位</p>
    <p>员工编号</p>
  </div>
</div>

样式设计

基础CSS样式：

.id-card {
  width: 300px;
  height: 180px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  overflow: hidden;
  background: white;
}

.company-logo {
  width: 30%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.employee-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ddd;
  margin: 20px auto;
}

.employee-info {
  width: 70%;
  padding: 20px;
  text-align: center;
}

高级效果

添加渐变背景和悬停效果：

.id-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  transition: transform 0.3s ease;
}

.id-card:hover {
  transform: translateY(-5px);
}

响应式设计

针对不同屏幕尺寸调整：

@media (max-width: 600px) {
  .id-card {
    width: 250px;
    height: 150px;
  }

  .employee-info h3 {
    font-size: 16px;
  }
}

打印优化

确保工牌打印效果良好：

@media print {
  .id-card {
    box-shadow: none;
    border: 2px solid #000;
  }
}

这些方法提供了从基础到高级的工牌制作方案，可以根据实际需求调整尺寸、颜色和布局。