在Web開發中，CSS小票模板是一種非常有用的工具。它可以讓我們在需要打印小票的時候，快速而方便地生成專業的小票。下面我們來看看如何使用CSS小票模板。

首先，要生成CSS小票模板，我們需要知道小票的具體樣式和結構。比如，小票通常包含了商品名稱、數量、價格等信息。我們可以使用如下的HTML結構來表示一個基本的小票：

<div class="ticket">
<div class="ticket-header">
<h2>訂單小票</h2>
<p>訂單號：20181207001</p>
</div>
<div class="ticket-body">
<p class="item-name">商品名稱1</p>
<p class="item-quantity">數量：1</p>
<p class="item-price">價格：10元</p>
<p class="item-name">商品名稱2</p>
<p class="item-quantity">數量：2</p>
<p class="item-price">價格：20元</p>
</div>
<div class="ticket-footer">
<p class="total-price">總價：30元</p>
</div>
</div>

上面的HTML代碼中，我們使用了一個名為“ticket”的div元素來包含整個小票的內容。其中，“ticket-header”表示小票的頭部信息，包括標題和訂單號；“ticket-body”表示小票的主體內容，包括商品名稱、數量和價格等信息；“ticket-footer”表示小票的底部信息，包括總價等。

接下來，我們可以使用CSS樣式來美化這個小票模板。比如，我們可以設置字體、背景色、邊距等樣式屬性。下面是一個基本的CSS樣式代碼：

.ticket {
font-family: Arial, sans-serif;
background-color: #fff;
padding: 20px;
border: 1px solid #000;
width: 250px;
}
.ticket-header {
text-align: center;
border-bottom: 1px solid #000;
}
.ticket-header h2 {
font-size: 24px;
margin: 0;
}
.ticket-header p {
font-size: 14px;
margin: 10px 0;
}
.ticket-body {
margin-top: 10px;
}
.item-name {
font-size: 16px;
font-weight: bold;
}
.item-quantity,
.item-price {
font-size: 14px;
margin: 0;
}
.ticket-footer {
margin-top: 10px;
}
.total-price {
text-align: right;
font-size: 16px;
font-weight: bold;
}

上面的CSS樣式中，我們設置了字體、背景色、邊距等樣式屬性來美化小票模板，并且針對每個小票元素設定了具體的樣式，如標題、商品名稱、價格等。

最后，我們可以將上面的HTML代碼和CSS樣式代碼整合到一起，來生成一個完整的CSS小票模板。這樣，我們就可以在需要打印小票的時候，更加方便地生成專業的小票模板了。