当前位置：首页 > CSS

css制作快递单

2026-04-01 15:23:23CSS

使用CSS制作快递单样式

通过CSS可以模拟快递单的布局和样式，以下是一个简单的实现方案：

HTML结构

<div class="express-bill">
  <div class="sender">
    <h3>寄件人信息</h3>
    <div class="field">姓名：<span class="value">张三</span></div>
    <div class="field">电话：<span class="value">13800138000</span></div>
    <div class="field">地址：<span class="value">北京市海淀区</span></div>
  </div>

  <div class="receiver">
    <h3>收件人信息</h3>
    <div class="field">姓名：<span class="value">李四</span></div>
    <div class="field">电话：<span class="value">13900139000</span></div>
    <div class="field">地址：<span class="value">上海市浦东新区</span></div>
  </div>

  <div class="barcode">
    <div class="code">1234 5678 9012</div>
    <div class="lines"></div>
  </div>
</div>

CSS样式

.express-bill {
  width: 210mm;
  height: 297mm;
  border: 2px solid #000;
  padding: 20px;
  font-family: Arial, sans-serif;
  position: relative;
}

.sender, .receiver {
  border: 1px dashed #666;
  padding: 15px;
  margin-bottom: 30px;
}

.field {
  margin: 10px 0;
  font-size: 16px;
}

.value {
  font-weight: bold;
  text-decoration: underline;
}

.barcode {
  position: absolute;
  bottom: 50px;
  right: 50px;
  text-align: center;
}

.code {
  font-size: 24px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.lines {
  height: 80px;
  background: repeating-linear-gradient(
    to right,
    #000,
    #000 2px,
    transparent 2px,
    transparent 10px
  );
}

增强样式效果

为模拟真实快递单，可以添加以下样式增强：

.express-bill {
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h3 {
  color: #d9534f;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.field {
  display: flex;
}

.field::before {
  content: "•";
  margin-right: 5px;
  color: #337ab7;
}

打印优化

如需打印效果，添加打印专用样式：

css制作快递单

@media print {
  .express-bill {
    border: none;
    box-shadow: none;
    width: 100%;
    height: auto;
  }

  body {
    margin: 0;
    padding: 0;
  }
}