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 {
.........完整代码请登录后点击上方下载按钮下载查看