css+div布局实现手机端移动端积分中心h5微页面代码-html代码-BFW代码库

css+div布局实现手机端移动端积分中心h5微页面代码

代码语言：html

代码描述：css+div布局实现手机端移动端积分中心h5微页面代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分中心</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            background-color: #1e2736;
            color: white;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .back-button, .menu-button {
            color: white;
            font-size: 24px;
            background: none;
            border: none;
        }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .stat {
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
        }
        .stat-label {
            font-size: 12px;
            color: #aaa;
        }
        .vip-card {
            background-color: #ffd700;
            color: #1e2736;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .vip-title {
            font-size: 20px;
            font-weight: bold;
        }
        .vip-description {
            font-size: 14px;
        }
        .task-section {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
        }
        .task-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .task-title {
            font-size: 18px;
            color: #333;
        }
        .view-all {
            color: #999;
            font-size: 14px;
        }
        .tabs {
            display: flex;
            margin-bottom: 15px;
        }
        .tab {
            padding: 5px 15px;
            margin-right: 10px;
            border-radius: 15px;
            font-size: 14px;
        }
        .tab.active {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        .task-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .task-info {
            display: flex;
            align-items: center;
        }
        .task-icon {
            width: 40px;
            height: 40px;
            background-color: #ff9999;
            border-radius: 5px;
            margin-right: 10px;
        }
        .task-details {
            font-size: 14px;
        }
        .task-name {
            color: #333;
            margin-bottom: 5px;
        }
        .task-reward, .task-tag {
            color: #999;
            font-size: 12px;
        }
        .task-button {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <button class="back-button">&#8592;</button>
            <h1>积分中心</h1>
            <button class="menu-button">&a.........完整代码请登录后点击上方下载按钮下载查看