最近，越來越多的在線商家都提供了訂單查詢的功能，讓消費者可以方便地查詢自己的訂單狀態(tài)。這個功能涉及到了HTML和CSS的使用。在本文中，我們將學(xué)習(xí)如何使用HTML和CSS創(chuàng)建一個簡單的訂單查詢界面。

首先，讓我們看一下HTML代碼。我們需要創(chuàng)建一個表單，其中包含輸入框和一個提交按鈕。輸入框用于輸入訂單號碼，而提交按鈕則用于觸發(fā)查詢操作。以下是HTML代碼：

<form>
<label>訂單號碼:</label>
<input type="text" name="orderNumber">
<input type="submit" value="查詢">
</form>

接下來，我們需要使用CSS為表單添加樣式。我們可以為表單添加背景顏色、字體樣式和內(nèi)邊距等。以下是CSS代碼：

form {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
padding: 20px;
}
label {
font-weight: bold;
}
input[type=text] {
padding: 5px;
border: none;
border-radius: 3px;
}
input[type=submit] {
background-color: #4caf50;
color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
}

現(xiàn)在我們已經(jīng)創(chuàng)建了一個漂亮的訂單查詢表單。當(dāng)消費者輸入訂單號碼并點擊提交按鈕時，我們需要一些后端代碼來查詢并顯示訂單信息。但是，本文僅涉及前端代碼的實現(xiàn)，因此該部分留給后續(xù)文章進(jìn)行探討。