隨著電子商務的普及，越來越多的網站需要實現在線購物功能，其中訂單頁面的設計變得越來越重要。而CSS模板則自然成為了我們設計訂單頁面不可缺少的工具。

/*主容器*/
.order-container {
width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
/*訂單信息容器*/
.order-info {
width: 100%;
float: left;
margin-bottom: 20px;
}
/*訂單表格*/
.order-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
/*訂單表格頭部*/
.order-table thead th {
padding: 10px 0;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
/*訂單表格單元格*/
.order-table td {
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
/*訂單總價容器*/
.order-total {
width: 100%;
float: right;
text-align: right;
padding-top: 20px;
}
/*訂單總價提示*/
.order-total span {
font-weight: bold;
font-size: 18px;
}
/*訂單總價金額*/
.order-total em {
font-size: 22px;
color: #f00;
}
/*訂單按鈕容器*/
.order-btns {
width: 100%;
float: right;
margin-top: 20px;
text-align: right;
}
/*訂單按鈕*/
.order-btn {
display: inline-block;
line-height: 36px;
padding: 0 20px;
background-color: #f00;
color: #fff;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
transition: all .3s ease;
}
/*訂單按鈕hover效果*/
.order-btn:hover {
opacity: .8;
}

以上是一份簡單的訂單頁面的CSS模板，我們可以看到，通過定義樣式，我們可以輕松地實現訂單頁面的各種元素樣式，包括訂單表格、訂單總價、訂單按鈕等等。同時，我們也可以根據需求進行適當的修改，達到各種不同的頁面設計效果。