我想要一个有特色的装箱单模板用HTML、CSS和Liquid变量方式呈现
时间: 2024-06-08 18:11:06 浏览: 5
好的,以下是一个基础的装箱单模板:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>装箱单</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
.address {
margin-top: 20px;
}
.address h2 {
font-size: 18px;
margin-bottom: 10px;
}
.address p {
margin: 0;
line-height: 1.5;
}
.logo {
text-align: center;
margin-bottom: 50px;
}
.logo img {
max-width: 200px;
}
.footer {
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="logo">
<img src="{{ logo_url }}" alt="Logo">
</div>
<h1>装箱单</h1>
<div class="address">
<h2>发件人</h2>
<p>{{ sender_name }}</p>
<p>{{ sender_address }}</p>
<p>{{ sender_city }}, {{ sender_state }} {{ sender_zip }}</p>
<p>{{ sender_country }}</p>
<h2>收件人</h2>
<p>{{ recipient_name }}</p>
<p>{{ recipient_address }}</p>
<p>{{ recipient_city }}, {{ recipient_state }} {{ recipient_zip }}</p>
<p>{{ recipient_country }}</p>
</div>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>数量</th>
<th>重量(kg)</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.weight }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="footer">
<p>运单号:{{ tracking_number }}</p>
<p>联系电话:{{ contact_phone }}</p>
</div>
</body>
</html>
```
你需要用Liquid变量替换模板中的占位符,例如 `{{ sender_name }}`。
然后,你可以使用CSS样式来自定义装箱单的外观。例如,你可以更改字体,更改表格边框颜色,或者添加其他元素。
希望这可以帮助到你!