對于電商網(wǎng)站來說，結(jié)算頁面是非常重要的一個頁面。一般來說，結(jié)算頁面是購物車結(jié)算后進入的頁面。在這個頁面中，用戶需要填寫收貨地址、支付方式等信息，并確認訂單。同時，這個頁面的樣式也必須簡潔明了，讓用戶可以快速完成結(jié)算流程。下面是一個簡單的商城結(jié)算頁面CSS源碼，供大家參考。

/* 布局樣式 */
.checkout {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.checkout-header {
font-size: 24px;
margin-bottom: 20px;
}
.checkout-form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.checkout-form label {
display: block;
width: 100%;
font-size: 16px;
margin-bottom: 10px;
}
.checkout-form input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
margin-bottom: 10px;
}
.checkout-form select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
margin-bottom: 10px;
}
.checkout-summary {
text-align: right;
margin-bottom: 20px;
}
.checkout-summary span {
display: inline-block;
font-size: 16px;
margin-bottom: 5px;
}
.checkout-summary strong {
display: block;
font-size: 24px;
}
.checkout-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.checkout-btn:hover {
background-color: #0062cc;
}
/* 響應式布局 */
@media (max-width: 767px) {
.checkout-form {
flex-wrap: nowrap;
flex-direction: column;
}
.checkout-form select {
margin-bottom: 20px;
}
}

在上面的代碼中，我們定義了結(jié)算頁面的布局樣式和響應式樣式。在布局樣式中，我們使用了flex布局來讓表單項可以靠左或靠右對齊。同時，我們也定義了表單元素和按鈕的基本樣式，包括字體大小、邊框、圓角等。在響應式樣式中，我們將表單元素的排列方式改為了垂直排列，以適應小屏幕設備的顯示。

以上就是一個簡單的商城結(jié)算頁面CSS源碼。希望對大家有所幫助。