div+css布局实现个人档案资料介绍个人主页代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局实现个人档案资料介绍个人主页代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
body {
  background: #121212;
}
</style>

  
</head>

<body translate="no">
  <div class="bg">
  <audio id="mahriAudio" preload="auto"></audio>
  <style>
    /* ==================================================
   01. ROOT VARIABLES
================================================== */
    :root {
      --w: 920px;
      --h: 800px;
      --bg: #070504;
      --dark: #0b0806;
      --dark2: #18110d;
      --black: #000000;
      --paper: #e7d9b7;
      --paper2: #d0bd91;
      --paper3: #f5eacb;
      --paper4: #c8af7b;
      --ink: #231812;
      --muted: #6b5842;
      --line: #b5a072;
      --line2: #79613f;
      --red: #90221c;
      --red2: #d64b37;
      --red3: #5b1511;
      --cream: #fff0cf;
      --tape: #bda668;
      --record-light: #ff6a6a;
      --transparent: transparent;
      --shadow-heavy: rgba(0, 0, 0, .72);
      --shadow-soft: rgba(0, 0, 0, .14);
      --scan: rgba(255, 255, 255, .08);
      --scan-strong: rgba(255, 255, 255, .11);
      --vhs: rgba(180, 28, 22, .18);
      --vhs-strong: rgba(180, 28, 22, .34);
      --vhs-soft: rgba(180, 28, 22, .10);
      --rgb-red: rgba(180, 30, 22, .20);
      --rgb-blue: rgba(63, 120, 145, .10);
      --rgb-red-shadow: rgba(180, 30, 22, .42);
      --rgb-blue-shadow: rgba(63, 120, 145, .22);
      --paper-stain: rgba(97, 61, 28, .12);
      --paper-stain2: rgba(90, 40, 20, .16);
      --paper-glow: rgba(255, 240, 207, .12);
      --title-shadow:
        3px 3px 0 var(--black),
        5px 5px 0 var(--red3),
        6px 6px 0 var(--red2);
      --title-shadow-small:
        2px 2px 0 var(--black),
        3px 3px 0 var(--red3),
        4px 4px 0 var(--red2);
      --glow-red:
        0 0 4px var(--red2),
        0 0 8px var(--red2),
        0 0 14px var(--rgb-red-shadow);
      --folder-shadow:
        inset 0 0 0 1px var(--line2),
        0 0 18px var(--rgb-red-shadow),
        0 18px 40px var(--shadow-heavy);
      --paper-shadow:
        7px 7px 0 var(--shadow-soft),
        0 0 14px var(--paper-stain);
      --paper-noise:
        repeating-linear-gradient(135deg,
          var(--transparent) 0,
          var(--transparent) 10px,
          var(--shadow-soft) 11px);
      --font: "Courier New", monospace;
      --title: Impact, "Arial Black", sans-serif;
    }

    /* ==================================================
   02. GLOBAL RESET
================================================== */
    body {
      margin: 20px auto;
    }

    * {
      box-sizing: border-box;
    }

    /* ==================================================
   03. MAIN BACKGROUND 
================================================== */
    .bg {
      width: var(--w);
      height: var(--h);
      margin: 30px auto;
      padding: 20px;
      background:
        radial-gradient(circle at 12% 7%, var(--vhs-strong), var(--transparent) 27%),
        radial-gradient(circle at 88% 92%, var(--vhs), var(--transparent) 34%),
        repeating-linear-gradient(0deg,
          var(--dark) 0,
          var(--dark) 2px,
          var(--black) 3px,
          var(--dark2) 4px);
      font-family: var(--font);
      color: var(--ink);
      overflow: hidden;
      position: relative;
      border: 1px solid var(--red2);
      outline: 2px dashed var(--red3);
      outline-offset: -8px;
    }

    .bg:before {
      content: "PLAY ▸ 00:08:85";
      position: absolute;
      bottom: 9px;
      right: 22px;
      color: var(--red2);
      font-size: 8px;
      letter-spacing: 3px;
      z-index: 70;
    }

    .bg:after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg,
          var(--transparent) 0,
          var(--transparent) 2px,
          var(--scan) 3px),
        linear-gradient(90deg,
          var(--transparent) 0%,
          var(--vhs-soft) 42%,
          var(--rgb-blue) 52%,
          var(--transparent) 100%);
      opacity: .55;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 60;
    }

    /* ==================================================
   04. MAIN STRUCTURE
================================================== */
    .wrap {
      height: 100%;
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 12px;
      background: var(--dark);
      border: 1px solid var(--line2);
      padding: 8px;
      box-shadow:
        inset 0 0 0 1px var(--red3),
        0 0 22px var(--shadow-heavy);
    }

    .main {
      position: relative;
      overflow: hidden;
      padding: 0 8px 8px 8px;
      background:
        radial-gradient(circle at 25% 0%, var(--vhs), var(--transparent) 32%),
        repeating-linear-gradient(0deg,
          var(--black) 0,
          var(--black) 3px,
          var(--dark2) 4px);
      border: 1px solid var(--red3);
      box-shadow: var(--folder-shadow);
    }

    .main:before {
      content: "";
      position: absolute;
      left: 0;
      right: 10px;
      top: 51px;
      height: 2px;
      background:
        linear-gradient(90deg,
          var(--transparent),
          var(--red),
          var(--red2),
          var(--transparent));
      z-index: 9;
    }

    .main:after {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      height: 3px;
      background:
        linear-gradient(90deg,
          var(--transparent),
          var(--red),
          var(--red2),
          var(--transparent));
      z-index: 12;
      opacity: .9;
    }

    /* ==================================================
   05. SIDEBAR
================================================== */
    .cover {
      background:
        radial-gradient(circle at 50% 14%, var(--vhs), var(--transparent) 34%),
        repeating-linear-gradient(0deg,
          var(--dark) 0,
          var(--dark) 3px,
          var(--black) 4px);
      border: 1px solid var(--red3);
      position: relative;
      padding: 17px;
      color: var(--cream);
      box-shadow:
        inset 0 0 0 1px var(--line2),
        0 18px 40px var(--shadow-heavy);
    }

    .cover:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, var(--transparent), var(--vhs-soft), var(--transparent)),
        repeating-linear-gradient(45deg,
          var(--transparent) 0,
          var(--transparent) 10px,
          var(--shadow-soft) 11px);
      pointer-events: none;
      opacity: .65;
    }

    /* ---------- COVER SLIDESHOW ---------- */
    .hero {
      background: var(--paper3);
      padding: 9px 9px 28px;
      border: 1px solid var(--cream);
      transform: rotate(-3deg);
      position: relative;
      height: 255px;
      width: 260px;
      margin-left: -20px;
      overflow: hidden;
      box-shadow:
        8px 8px 0 var(--shadow-soft),
        0 0 13px var(--rgb-red-shadow);
      transition: .25s;
    }

    .hero:hover {
      transform: rotate(-2deg) scale(1.02);
    }

    .hero:before {
      content: "";
      position: absolute;
      top: -12px;
      left: 62px;
      width: 104px;
      height: 22px;
      background: var(--tape);
      opacity: .85;
      transform: rotate(4deg);
      z-index: 8;
    }

    .hero:after {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: 9px;
      height: 245px;
      background:
        repeating-linear-gradient(0deg,
          var(--scan-strong) 0,
          var(--scan-strong) 1px,
          var(--transparent) 2px,
          var(--transparent) 4px),
        linear-gradient(90deg,
          var(--rgb-red),
          var(--transparent) 38%,
          var(--rgb-blue));
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 7;
      animation: mahriVhsFlicker .18s infinite alternate;
    }

    .slide {
      position: absolute;
      left: 9px;
      right: 9px;
      top: 9px;
      height: 215px;
      opacity: 0;
      transition: opacity .8s ease;
      overflow: hidden;
      background: var(--black);
    }

    .slide.active {
      opacity: 1;
    }

    .slide img {
      width: 100%;
      height: 245px;
      object-fit: cover;
      display: block;
      filter:
        contrast(1.38) brightness(.72) saturate(.78) sepia(.22) hue-rotate(-10deg);
      transform: scale(1.04);
      animation: mahriVhsDrift 5s infinite alternate ease-in-out;
    }

    .slide.active img {
      animation:
        mahriVhsDrift 5s infinite alternate ease-in-out,
        mahriRgbShake .22s infinite alternate;
    }

    .vhs-label {
      position: absolute;
      left: 16px;
      bottom: 7px;
      z-index: 9;
      color: var(--red2);
      font-size: 9px;
      font-weight: bold;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* ---------- COVER NAME ---------- */
    .covername {
      font-family: var(--title);
      font-size: 51px;
      line-height: .82;
      color: var(--red2);
      letter-spacing: 1px;
      text-transform: uppercase;
      transform: rotate(-4deg);
      margin: 8px 0;
      text-shadow: var(--title-shadow);
      transition: .25s;
      position: relative;
      z-index: 2;
    }

    .cover:hover .covername {
      color: var(--cream);
      text-shadow: var(--glow-red);
    }

    .covername:after {
      content: "";
      display: block;
      width: 175px;
      height: 5px;
      background:
        linear-gradient(90deg,
          var(--red),
          var(--red2),
          var(--transparent));
      margin-top: 10px;
      transform: skew(-22deg);
    }

    .coversub {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 4px;
      border-top: 1px solid var(--line2);
      border-bottom: 1px solid var(--line2);
      padding: 7px 0;
      margin-top: 12px;
      position: relative;
      .........完整代码请登录后点击上方下载按钮下载查看