<div>是HTML中的一個常見的標簽，用于定義HTML文檔中的一個區域，可以將元素分組并為其應用CSS樣式。在網頁開發中，特別是在制作訂單頁面時，使用<div>標簽和相關的CSS樣式可以將訂單信息進行合理的排版和布局。
下面將通過幾個代碼案例來詳細說明如何使用<div>和CSS樣式創建訂單頁面。
案例一：基本的訂單布局

，讓我們創建一個基本的訂單布局。

<code>
<div class="order">
<h2>訂單信息</h2>
<div class="order-details">
<p>商品名稱：iPhone 12</p>
<p>單價：yen5999</p>
<p>數量：1</p>
<p>總額：yen5999</p>
</div>
<div class="order-total">
<p>訂單總額：yen5999</p>
</div>
</div>
</code>

在這個案例中，我們通過使用<div>標簽和相應的CSS樣式，將訂單信息分為兩個部分：訂單詳情和訂單總額。通過設置適當的內外邊距和樣式，可以使訂單信息更清晰地呈現在頁面上。

案例二：添加樣式美化訂單

接下來，讓我們對訂單的樣式進行一些美化。

<code>
<style>
.order {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
<br>
      .order-details {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 10px;
}
<br>
      .order-total {
background-color: #eee;
padding: 10px;
}
<br>
      .order h2 {
color: #333;
}
<br>
      .order p {
margin: 5px 0;
}
</style>
<br>
    <div class="order">
<h2>訂單信息</h2>
<div class="order-details">
<p>商品名稱：iPhone 12</p>
<p>單價：yen5999</p>
<p>數量：1</p>
<p>總額：yen5999</p>
</div>
<div class="order-total">
<p>訂單總額：yen5999</p>
</div>
</div>
</code>

在這個案例中，我們通過添加一些背景顏色、邊框樣式和字體顏色等樣式，使訂單頁面看起來更加美觀。通過調整樣式，可以根據實際需要來定制訂單頁面的外觀。

案例三：響應式布局

最后，讓我們為訂單頁面添加一個響應式布局。

<code>
<style>
.order {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
<br>
      .order-details {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 10px;
flex: 1 1 50%;
}
<br>
      .order-total {
background-color: #eee;
padding: 10px;
flex: 1 1 50%;
}
<br>
      .order h2 {
color: #333;
}
<br>
      .order p {
margin: 5px 0;
}
<br>
      @media (max-width: 768px) {
.order-details,
.order-total {
flex: 1 1 100%;
}
}
</style>
<br>
    <div class="order">
<h2>訂單信息</h2>
<div class="order-details">
<p>商品名稱：iPhone 12</p>
<p>單價：yen5999</p>
<p>數量：1</p>
<p>總額：yen5999</p>
</div>
<div class="order-total">
<p>訂單總額：yen5999</p>
</div>
</div>
</code>

在這個案例中，我們使用了CSS的flex布局，使訂單詳情和訂單總額在大屏幕上并排顯示，在小屏幕上則分為兩行顯示。通過使用媒體查詢@media，在小屏幕上重新設置了元素的寬度，以適應不同的屏幕尺寸。

以上是關于使用<div>和CSS樣式創建訂單頁面的幾個示例。通過這些示例，可以清楚地看到如何使用<div>和相應的CSS樣式來實現訂單頁面的布局和樣式設置。這些案例可以作為參考，根據實際需求進行修改和定制，以創建出符合自己需求的訂單頁面。