div+css布局实现黑色数字货币后台仪表盘页面代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现黑色数字货币后台仪表盘页面代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEXUS | Obsidian Crypto Terminal</title>
    
    <!-- Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Icons: Phosphor -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    
    <!-- Chart.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.js"></script>

    <style>
        :root {
            --bg-dark: #050505;
            --bg-panel: rgba(20, 20, 25, 0.6);
            --border-color: rgba(255, 255, 255, 0.08);
            --border-highlight: rgba(255, 255, 255, 0.15);
            
            --neon-cyan: #00f2ea;
            --neon-purple: #b026ff;
            --neon-green: #00ff9d;
            --neon-red: #ff4d4d;
            
            --text-main: #ffffff;
            --text-muted: #8b8b96;
            
            --gradient-primary: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
            --shadow-glow: 0 0 20px rgba(0, 242, 234, 0.15);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

        body {
            background-color: var(--bg-dark);
            background-image: 
                radial-gradient(circle at 0% 0%, rgba(176, 38, 255, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 100% 100%, rgba(0, 242, 234, 0.08) 0%, transparent 40%),
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px; /* Grid pattern */
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            height: 100vh;
            overflow: hidden;
            display: flex;
        }

        /* --- Typography --- */
        .text-cyan { color: var(--neon-cyan); }
        .text-green { color: var(--neon-green); }
        .text-purple { color: var(--neon-purple); }
        .text-muted { color: var(--text-muted); }
        .text-red { color: var(--neon-red); }
        
        /* Tabular nums ensures numbers align vertically */
        .nums { font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

        /* --- Components --- */
        
        /* Glass Panel */
        .glass-panel {
            background: var(--bg-panel);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-top: 1px solid var(--border-highlight);
            border-radius: 20px;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        /* Gradient Border Card */
        .gradient-card {
            position: relative;
            background: rgba(15, 15, 20, 0.8);
            z-index: 1;
            border-radius: 20px;
        }
        
        .gradient-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: 21px;
            padding: 1px;
            background: var(--gradient-primary);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: -1;
            opacity: 0.6;
        }

        /* Sidebar */
        aside {
            width: 88px;
            height: 100%;
            border-right: 1px solid var(--border-color);
            background: rgba(5, 5, 5, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 0;
            z-index: 10;
            backdrop-filter: blur(10px);
        }

        .logo {
            font-size: 28px;
            color: var(--neon-cyan);
            margin-bottom: 60px;
            filter: drop-shadow(0 0 10px rgba(0, 242, 234, 0.6));
            animation: float 6s ease-in-out infinite;
        }

        .nav-item {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            border-radius: 14px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 22px;
            position: relative;
        }

        .nav-item:hover {
            color: #fff;
            background: rgba(255,255,255,0.05);
        }

        .nav-item.active {
            color: var(--neon-cyan);
            background: rgba(0, 242, 234, 0.1);
            box-shadow: 0 0 15px rgba(0, 242, 234, 0.2);
        }

      .........完整代码请登录后点击上方下载按钮下载查看