div+css实现完整的手机在线音乐考试系统网站app的ui页面原型图代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现完整的手机在线音乐考试系统网站app的ui页面原型图代码

代码标签： div css 完整手机在线音乐考试系统网站 app ui 页面原型图代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
  <style>
    :root{
      --bg: #f6f7fb;
      --canvas-bg: #ffffff;
      --panel: #ffffff;
      --border: #e8e8ef;
      --muted: #8c8fa1;
      --text: #222433;
      --primary: #6c5ce7;
      --primary-2: #4f46e5;
      --accent: #00d4ff;
      --success: #22c55e;
      --warning: #f59e0b;
      --danger: #ef4444;
      --shadow: 0 8px 30px rgba(23,31,54,.08);
      --radius: 16px;
      --phone-radius: 24px;
      --gap: 40px;
    }
    *{box-sizing: border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 1px 1px, rgba(76,81,191,.18) 1px, transparent 2px) 0 0/24px 24px,
        linear-gradient(180deg, #f8f9ff 0%, #eef1ff 100%);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, "Noto Sans CJK SC", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* Viewport + Canvas */
    #viewport{
      position:fixed; inset:0;
      overflow:hidden;
      cursor:default;
      user-select:none;
    }
    #viewport.space{ cursor:grab; }
    #viewport.panning{ cursor:grabbing; }
    #canvas{
      position:absolute; left:0; top:0;
      transform-origin: 0 0;
      will-change: transform;
      display:grid;
      grid-template-columns: repeat(4, 440px);
      grid-auto-rows: auto;
      gap: var(--gap);
      padding: 60px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.7));
      border-radius: 24px;
      box-shadow: 0 10px 50px rgba(38,45,73,.08);
    }

    /* HUD (zoom controls) */
    .hud{
      position:fixed; z-index:10;
      left:16px; right:16px; top:12px;
      display:flex; align-items:center; justify-content:space-between;
      pointer-events:none;
    }
    .hud .brand{
      pointer-events:auto;
      display:flex; align-items:center; gap:10px;
      padding:8px 12px; border-radius:14px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(0,0,0,.06);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      font-weight:700; color:#2b2d42;
    }
    .hud .brand .tag{
      font-size:12px; color:#5a5f7c; font-weight:600; padding:3px 8px; border-radius:999px;
      background: #f1f3ff; border:1px solid #e7e9ff;
    }
    .hud .zoom{
      pointer-events:auto;
      display:flex; gap:8px; align-items:center;
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(0,0,0,.06);
      padding:6px; border-radius:14px; box-shadow: var(--shadow);
    }
    .hud .zoom button{
      appearance:none; border:0; outline:0; cursor:pointer;
      background:#fff; border:1px solid var(--border);
      width:36px; height:36px; border-radius:10px;
      display:grid; place-items:center; color:#374151;
    }
    .hud .zoom button:hover{ background:#f7f8ff }
    .hud .zoom .label{
      padding:0 10px; font-weight:700; color:#2b2d42;
      min-width:58px; text-align:center;
    }

    /* Module container */
    .module{
      position:relative;
      width: 440px;
      background: var(--panel);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 24px 28px;
      box-shadow: var(--shadow);
    }
    .module-title{
      position:absolute; top:-14px; left:18px;
      background: linear-gradient(135deg, var(--primary), #7c67ff);
      color:white; font-weight:700; font-size:14px;
      padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
      box-shadow: 0 6px 20px rgba(108,92,231,.3);
    }
    .module .desc{ color:var(--muted); font-size:12px; margin-top:6px }

    /* Phone shell */
    .phone{
      width: 380px; height: 760px; margin: 0 auto;
      background: #fff; border: 1px solid #ececf4; border-radius: var(--phone-radius);
      overflow:hidden; display:flex; flex-direction:column;
      box-shadow: 0 16px 40px rgba(29,37,69,.12);
    }
    .statusbar{
      height: 18px; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
    }
    .appbar{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 16px;
      background: linear-gradient(135deg, rgba(108,92,231,.12), rgba(0,212,255,.10));
      border-bottom: 1px solid #eef0ff;
      backdrop-filter: blur(8px);
    }
    .appbar .title{ font-weight:800; letter-spacing:.3px; }
    .appbar .right, .appbar .left{ display:flex; align-items:center; gap:10px }
    .chip{
      display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
      background:#f4f5ff; border:1px solid #e9ebff; color:#3b3f73; font-weight:600; font-size:12px;
    }

    .content{
      flex:1; overflow:auto; padding: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    }
    .tabbar{
      height:60px; display:flex; align-items:center; justify-content:space-around;
      border-top:1px solid #f0f1f6; background:#fff;
    }
    .tabbar .item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:#606488; font-size:12px }
    .tabbar .item.active{ color: var(--primary) }

    /* Forms */
    .segmented{
      display:flex; background:#f6f7ff; border:1px solid #e8eaff; border-radius:12px; padding:4px; gap:6px;
    }
    .segmented button{
      flex:1; padding:8px 10px; border-radius:8px; border:0; background:transparent; font-weight:700; color:#4b4f7b; cursor:pointer;
    }
    .segmented button.active{ background:#fff; color:var(--primary); box-shadow: 0 6px 14px rgba(108,92,231,.15) }

    .form-row{ display:flex; gap:10px }
    .form-group{ margin:10px 0 }
    .form-group label{ display:block; font-size:12px; color:#656a8b; margin-bottom:6px }
    .input, .select, .textarea{
      width:100%; padding:12px 12px;
      border:1px solid #e7e9f6; border-radius:12px; outline:0;
      background:#fff; font-size:14px;
    }
    .input:focus, .textarea:focus{ border-color:#cdd2ff; box-shadow: 0 0 0 4px rgba(108,92,231,.10) }
    .input-icon{
      display:flex; align-items:center; gap:8px; border:1px solid #e7e9f6; border-radius:12px; padding:10px 12px; background:#fff;
    }
    .input-icon input{ border:0; outline:0; flex:1; font-size:14px }
    .input-append{ display:flex; gap:8px; align-items:center }
    .input-append input{ flex:1 }
    .hint{ color:#8a8fac; font-size:12px }
    .agree{ display:flex; align-items:center; gap:8px; font-size:12px; color:#6a6f90; margin-top:8px }

    .btn{
      appearance:none; border:0; outline:0; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 14px; border-radius:12px; font-weight:800; letter-spacing:.2px;
      box-shadow: 0 8px 16px rgba(81,56,238,.18);
    }
    .btn.primary{
      background: linear-gradient(135deg, var(--primary), #7c67ff); color:#fff;
    }
    .btn.secondary{
      background:#f3f5ff; color:#3f4580; border:1px solid #e6eaff; box-shadow:none;
    }
    .btn.outline{
      background:#fff; border:1px solid #e7e9f6; color:#3b3f73; box-.........完整代码请登录后点击上方下载按钮下载查看