CSS(層疊樣式表)是Web開發中經常使用的一種技術,可以用來美化頁面、增強用戶體驗和提高頁面響應速度。在訂單列表中,CSS也發揮了重要的作用。
/* 訂單列表樣式 */ /* 表格樣式 */ table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } table td, th { border: 1px solid #ddd; padding: 8px; text-align: center; } table th { background-color: #f2f2f2; } /* 訂單狀態樣式 */ .order-status { font-weight: bold; text-transform: uppercase; } .order-status.wait-pay { color: #ffcc00; } .order-status.fail { color: #e60000; } .order-status.success { color: #00cc66; } /* 訂單操作樣式 */ .order-action { display: inline-block; padding: 5px 10px; color: #fff; background-color: #00cc66; border-radius: 5px; text-decoration: none; margin-right: 10px; } .order-action:hover { background-color: #008040; } .order-action.cancel { background-color: #e60000; } .order-action.cancel:hover { background-color: #b30000; }
以上是一個簡單的訂單列表的樣式代碼,其中使用了表格樣式和訂單狀態樣式。訂單狀態使用了不同的顏色來區分不同的訂單狀態,比如等待付款狀態會用黃色表示,交易成功會用綠色表示,而交易失敗會用紅色表示。
此外,還定義了訂單操作樣式,使用了不同的背景顏色和圓角邊框。取消訂單操作使用了紅色背景。
通過CSS樣式的定義,訂單列表的外觀更為美觀,而且也提高了用戶體驗。同時,樣式的定義也提高了代碼復用性和可維護性。