隨著移動支付的普及，手機支付已成為人們日常生活中的必備工具。而手機支付頁面的設計對于用戶體驗來說至關重要，其中CSS模板的使用可以有效提升頁面的美觀性和可用性。

/* 支付頁面CSS模板樣式 */
/* 頁面布局 */
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", sans-serif;
background-color: #F3F3F3;
}
.container {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.header {
text-align: center;
padding: 20px;
background-color: #FFFFFF;
border-bottom: 1px solid #E4E4E4;
}
.form {
background-color: #FFFFFF;
padding: 40px;
border-radius: 5px;
box-shadow: 0px 0px 20px #D6D6D6;
}
/* 表單樣式 */
.input-group {
margin-bottom: 20px;
}
.input-label {
font-size: 14px;
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.input-field {
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 3px;
box-shadow: inset 0px 0px 5px #CFCFCF;
box-sizing: border-box;
}
.btn {
width: 100%;
background-color: #FFC107;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
padding: 10px;
border: none;
border-radius: 3px;
transition: background-color 0.2s ease-in-out;
}
.btn:hover {
background-color: #FFA000;
}

在以上代碼中，我們可以看到支付頁面的CSS模板主要包含了頁面布局、表單樣式和按鈕樣式三部分。

頁面布局部分包含指定頁面的寬度、頁眉、表單和頁腳等基本元素。表單樣式部分則設置了表單元素的樣式，包括文本框、標簽和按鈕等。按鈕樣式部分則設置了按鈕懸浮時的顏色變化效果。

使用這份CSS模板，我們可以輕松地設計出一款美觀、易用的支付頁面，提升用戶的支付體驗。