打印小票css

打印小票是电商平台、餐饮行业和零售店经常使用的功能，它可以让客户收到有价值的信息并增加品牌知名度。在CSS中，我们可以使用@media指令来创建一个特定的样式表以便打印优美的小票。

首先，我们需要定义一些全局样式，如字体和颜色。代码如下：

@media print {
body {
    font-family: '宋体', sans-serif;
    font-size: 12px;
    color: #000;
}
}

接下来，我们需要为小票定义样式。这包括布局和排版，以及特定元素的颜色和字体大小。以下是一个示例小票的样式代码：

@media print {
.receipt {
    width: 200px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #000;
    background: #fff;
}
.receipt h2 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.receipt p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}
.receipt .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.receipt .item .name {
    flex-basis: 60%;
}
.receipt .item .price {
    flex-basis: 40%;
    text-align: right;
}
.receipt .total {
    font-weight: bold;
    margin-top: 20px;
}
}
    

使用以上样式，我们可以创建一个简单的小票，如下所示：

店名小票

订单号：1234567890

下单时间：2020-01-01 12:00

在打印时，只需将页面放入打印机即可。使用CSS样式表可以使小票更加专业、美观，并提高客户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！