隨著移動互聯(lián)網的發(fā)展，越來越多的人開始使用移動設備進行購物。在設計移動端購物頁面時，要考慮到屏幕小、操作靈活等因素，同樣也要注意頁面的美觀和易用性。

其中，CSS樣式的設計尤為重要。下面我們就來看一看，在移動端如何使用CSS來設計確認購物頁面。

/* 確認購物頁面的CSS樣式 */
.shopping {
width: 100%;
height: auto;
padding: 1rem;
box-sizing: border-box;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #333;
}
.order {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6rem;
margin-top: 1rem;
padding: 0.5rem 1rem;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0.3rem;
}
.order img {
width: 4rem;
height: 4rem;
}
.order .name {
width: 50%;
margin-left: 1rem;
font-size: 1.1rem;
}
.order .price {
width: 30%;
font-size: 1.1rem;
text-align: right;
}
.total {
width: 100%;
height: 4rem;
margin-top: 1rem;
}
.total span {
float: left;
font-size: 1.1rem;
}
.total .money {
float: right;
font-size: 1.4rem;
color: #f00;
}
.submit {
width: 90%;
height: 3.5rem;
margin: 2rem auto 0;
background-color: #f00;
border-radius: 0.3rem;
text-align: center;
line-height: 3.5rem;
color: #fff;
font-size: 1.3rem;
}

以上代碼實現了一個簡單的確認購物頁面。其中，.shopping為整個頁面的父元素，.order為訂單信息的容器，包括商品圖片、名稱和價格等信息。.total為總價信息的容器，包括商品總價和運費等信息，.submit為提交訂單的按鈕。

在移動端商品頁面設計中，CSS樣式不僅僅要美觀，也要符合移動端設備操作習慣，使用戶有更好的購物體驗。因此，在設計移動端購物頁面時，CSS樣式的設計是必不可少的。