css布局模仿手机端支付宝首页ui代码-html代码-BFW代码库

css布局模仿手机端支付宝首页ui代码

代码语言：html

代码描述：css布局模仿手机端支付宝首页ui代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>支付宝</title>
    <!-- 引入 RemixIcon 图标库，风格非常接近原生 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/remixicon.3.5.0.css">
    <style>
        :root {
            --ali-blue: #1677ff;
            --ali-blue-dark: #1058c4;
            --bg-gray: #f5f5f5;
            --text-main: #333;
            --text-sub: #999;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--bg-gray);
            padding-bottom: 60px; /* 给底部导航栏留位置 */
        }

        /* --- 顶部区域 (Header) --- */
        .header {
            background: linear-gradient(180deg, #1677ff 0%, #1a85ff 100%);
            padding: 10px 12px 10px 12px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* 状态栏顶部填充 (模拟APP) */
        .status-bar-shim {
            height: 0px; /* 浏览器中设为0，如果是PWA或全屏模式需设为20px+ */
        }

        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            color: white;
        }

        .location {
            font-size: 15px;
            display: flex;
            align-items: center;
            margin-right: 10px;
        }
        .location i { font-size: 18px; }

        .search-box {
            flex: 1;
            background: rgba(255,255,255,0.2);
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            color: rgba(255,255,255,0.9);
            font-size: 14px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .search-box i { margin-right: 6px; }

        .header-icons {
            display: flex;
            gap: 15px;
            margin-left: 12px;
        }
        .header-icons i { font-size: 22px; }

        /* --- 四大金刚键 (Big Actions) --- */
        .big-actions {
            background: #1a85ff; /* 延续Header颜色 */
            display: flex;
            justify-content: space-between;
            padding: 10px 20px 25px 20px;
            color: white;
        }

        .action-item {
            display: flex;
            flex-direction: column;
            align-.........完整代码请登录后点击上方下载按钮下载查看