隨著移動支付的普及，支付寶成為國內最常用的支付方式之一。而移動端的支付寶頁面，如何實現良好的視覺效果和用戶體驗呢？這里我們來介紹一下支付寶移動端的 CSS。

// 設置頁面基礎字體大小
html {
font-size: 14px;
}
// 移動端頁面通用樣式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// 設置全局文本顏色
body {
color: #333;
}
// 設置頁面背景色
body {
background-color: #f5f5f5;
}
// 重置 input 樣式
input[type=search],
input[type=text],
input[type=password],
input[type=tel],
input[type=email] {
border: none;
outline: none;
background: none;
}
// 設置按鈕激活樣式
button:active {
background-color: #eee;
}
// 調整列表樣式
ul,
ol {
list-style: none;
}
// 限制彈出框高度
.ant-popover-inner-content {
max-height: 90% !important;
}
// 調整表單元素間距
.ant-form-item-control {
line-height: 1.8;
}
// 調整列表元素間距
.ant-list-item {
margin-top: 12px;
}
// 調整表格樣式
.ant-table {
margin-top: 12px;
background-color: #fff;
}
// 設置頁頁頭樣式
.ant-page-header {
background-color: #fff;
border-bottom: 1px solid #e8e8e8;
}
// 調整頁腳樣式
.ant-layout-footer {
background-color: #f5f5f5;
color: #999;
text-align: center;
padding-top: 24px;
padding-bottom: 24px;
}

以上是支付寶移動端常見的 CSS 樣式，對于其他特定頁面，還需要根據需求靈活設置。通過合理的 CSS 設計，可以讓移動端頁面更加美觀、易于操作，提高用戶體驗。