css制作明信片

使用CSS制作明信片

明信片基本结构

HTML部分需包含一个容器元素，通常使用div并为其添加类名（如postcard）。内部可划分为标题、图片、文字和寄件人信息区域。

<div class="postcard">
  <h1>旅行明信片</h1>
  <div class="image"></div>
  <p class="message">这里是明信片的正文内容...</p>
  <div class="sender">寄件人信息</div>
</div>

基础样式设计

通过CSS设置明信片的尺寸、背景色和边框。标准明信片尺寸为148mm×105mm（接近6×4英寸），可使用mm单位或px单位缩放。

.postcard {
  width: 148mm;
  height: 105mm;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  padding: 15px;
}

添加装饰元素

使用伪元素或背景图案增强视觉效果。例如用::before添加邮票角效果：

.postcard::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 40px;
  background: repeating-linear-gradient(
    45deg, 
    #f00, 
    #f00 5px, 
    #fff 5px, 
    #fff 10px
  );
}

图片区域处理

为图片容器添加占位样式或实际背景图。使用background-size: cover确保图片填充整个区域：

.image {
  height: 60mm;
  background: url('scenery.jpg') center/cover;
  margin: 5px 0;
  border: 1px dashed #ccc;
}

文字排版设计

明信片正文建议使用手写风格字体（需通过@font-face引入或使用通用字体栈）。控制行高和字间距提升可读性：

.message {
  font-family: 'Segoe Script', cursive;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-align: justify;
}

.sender {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-style: italic;
}

响应式适配

添加媒体查询确保在不同设备上正常显示。特别是移动端需要调整尺寸：

@media (max-width: 600px) {
  .postcard {
    width: 90vw;
    height: calc(90vw * 0.7);
  }
}

打印优化

通过@media print规则确保打印效果。隐藏无关元素并调整边距：

@media print {
  body * { visibility: hidden; }
  .postcard, .postcard * { visibility: visible; }
  .postcard {
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: none;
  }
}

进阶效果（可选）

添加交互效果如悬停旋转或3D倾斜。使用transform属性实现：

.postcard:hover {
  transform: rotate(2deg) translateY(-5px);
  transition: all 0.3s ease;
}