!DOCTYPE html
html lang=zh-CN
head
  meta charset=UTF-8
  meta name=viewport content=width=device-width, initial-scale=1.0
  meta name=description content=xiaolu的个人官网 - 资源分享与个人作品
  titlexiaolu  个人官网title
  style
    root {
      --primary #4361ee;
      --primary-light #4895ef;
      --secondary #3f37c9;
      --dark #1a1a2e;
      --light #f8f9fa;
      --accent #f72585;
    }
    
     {
      margin 0;
      padding 0;
      box-sizing border-box;
    }
    
    body {
      font-family 'PingFang SC', 'Microsoft YaHei', sans-serif;
      color var(--light);
      line-height 1.6;
      overflow-x hidden;
      position relative;
    }
    
    #particles-js {
      position fixed;
      width 100%;
      height 100%;
      top 0;
      left 0;
      z-index -1;
      background-color var(--dark);
    }
    
    .container {
      max-width 1200px;
      margin 0 auto;
      padding 0 20px;
    }
    
    header {
      background rgba(26, 26, 46, 0.8);
      backdrop-filter blur(10px);
      position fixed;
      width 100%;
      z-index 100;
      box-shadow 0 2px 10px rgba(0,0,0,0.1);
    }
    
    nav {
      display flex;
      justify-content space-between;
      align-items center;
      padding 20px 0;
    }
    
    .logo {
      font-size 24px;
      font-weight 700;
      color var(--light);
      text-decoration none;
      display flex;
      align-items center;
      gap 10px;
    }
    
    .logo span {
      color var(--primary-light);
    }
    
    .nav-links {
      display flex;
      gap 30px;
    }
    
    .nav-links a {
      color var(--light);
      text-decoration none;
      font-weight 500;
      transition all 0.3s ease;
      position relative;
    }
    
    .nav-links ahover {
      color var(--primary-light);
    }
    
    .nav-links aafter {
      content '';
      position absolute;
      bottom -5px;
      left 0;
      width 0;
      height 2px;
      background var(--primary-light);
      transition width 0.3s ease;
    }
    
    .nav-links ahoverafter {
      width 100%;
    }
    
    .hero {
      height 100vh;
      display flex;
      align-items center;
      position relative;
    }
    
    .hero-content {
      max-width 600px;
    }
    
    .hero h1 {
      font-size clamp(32px, 5vw, 56px);
      font-weight 700;
      margin-bottom 20px;
      line-height 1.2;
    }
    
    .hero h1 span {
      color var(--primary-light);
    }
    
    .hero p {
      font-size 18px;
      color rgba(248, 249, 250, 0.8);
      margin-bottom 30px;
    }
    
    .btn {
      display inline-block;
      background linear-gradient(135deg, var(--primary), var(--secondary));
      color var(--light);
      padding 12px 30px;
      border-radius 50px;
      font-size 16px;
      font-weight 600;
      text-decoration none;
      transition all 0.3s ease;
      border none;
      cursor pointer;
      box-shadow 0 4px 15px rgba(67, 97, 238, 0.3);
    }
    
    .btnhover {
      transform translateY(-3px);
      box-shadow 0 8px 25px rgba(67, 97, 238, 0.4);
    }
    
    .btn-group {
      display flex;
      flex-direction column;
      gap 15px;
    }
    
    .contact-info {
      background rgba(67, 97, 238, 0.2);
      padding 15px;
      border-radius 10px;
      border-left 3px solid var(--primary-light);
      margin-top 20px;
    }
    
    .contact-item {
      display flex;
      align-items center;
      margin-bottom 10px;
      font-size 16px;
    }
    
    .contact-itemlast-child {
      margin-bottom 0;
    }
    
    .contact-icon {
      margin-right 10px;
      color var(--primary-light);
      font-size 18px;
    }
    
    .download-note {
      font-size 12px;
      color var(--primary-light);
      margin-top 5px;
      opacity 0.8;
      text-align center;
    }
    
    .resources {
      padding 100px 0;
      background rgba(30, 30, 46, 0.7);
      backdrop-filter blur(5px);
    }
    
    .section-title {
      text-align center;
      margin-bottom 60px;
    }
    
    .section-title h2 {
      font-size 36px;
      font-weight 700;
      margin-bottom 15px;
    }
    
    .section-title p {
      color rgba(248, 249, 250, 0.6);
      max-width 700px;
      margin 0 auto;
    }
    
    .resource-card {
      background rgba(37, 37, 56, 0.8);
      border-radius 15px;
      padding 30px;
      transition all 0.3s ease;
      box-shadow 0 5px 15px rgba(0,0,0,0.1);
      backdrop-filter blur(5px);
    }
    
    .resource-cardhover {
      transform translateY(-10px);
      box-shadow 0 15px 30px rgba(0,0,0,0.2);
    }
    
    .resource-card h3 {
      font-size 20px;
      margin-bottom 15px;
      color var(--primary-light);
    }
    
    .resource-card p {
      color rgba(248, 249, 250, 0.7);
      margin-bottom 20px;
    }
    
    .resource-grid {
      display grid;
      grid-template-columns repeat(auto-fit, minmax(300px, 1fr));
      gap 30px;
    }
    
    footer {
      background rgba(22, 22, 35, 0.8);
      padding 50px 0;
      text-align center;
      backdrop-filter blur(5px);
    }
    
    .footer-links {
      display flex;
      justify-content center;
      gap 20px;
      margin-bottom 30px;
    }
    
    .footer-links a {
      color var(--light);
      text-decoration none;
      transition all 0.3s ease;
    }
    
    .footer-links ahover {
      color var(--primary-light);
    }
    
    .copyright {
      color rgba(248, 249, 250, 0.5);
      font-size 14px;
    }
    
    @media (max-width 768px) {
      .nav-links {
        display none;
      }
      
      .hero {
        padding-top 100px;
        height auto;
        padding-bottom 80px;
      }
      
      .contact-info {
        padding 12px;
      }
      
      .contact-item {
        font-size 14px;
      }
    }
  style
head
body
  !-- 粒子背景容器 --
  div id=particles-jsdiv
  
  header
    div class=container
      nav
        a href=# class=logoxiaoluspan的随意领域spana
        div class=nav-links
          a href=#home首页a
          a href=#resources资源a
          a href=#about关于a
          a href=#contact联系a
        div
      nav
    div
  header
  
  section class=hero id=home
    div class=container
      div class=hero-content
        h1欢迎来到 spanxiaoluspan 的个人空间h1
        p这里是我的个人官网，分享我的资源、作品和想法。希望能为你带来有价值的内容。p
        div class=btn-group
          a href=#resources class=btn浏览资源a
          div class=contact-info
            div class=contact-item
              span class=contact-icon📱span
              spanQQ：3796647554span
            div
            div class=contact-item
              span class=contact-icon🎥span
              span快手：xiaolu-911-xiaoluspan
            div
          div
        div
      div
    div
  section
  
  section class=resources id=resources
    div class=container
      div class=section-title
        h2资源下载h2
        p精选资源分享，点击即可下载p
      div
      
      div class=resource-grid
        div class=resource-card
          h3千恋万花h3
          p安卓直装版，一键安装即玩p
          a href=httpskfcv50-my.sharepoint.comugpersonalxiaolu_kfcv50_onmicrosoft_comEZq-lPk4lGNEiyUJ6o7UGukBiXFYyeutIkAow3JeMaaQNAdownload=1 class=btn立即下载a
          div class=download-note基于OneDrive存储，理论上不限速。如遇下载缓慢，建议使用VPNdiv
          div class=notice style=margin-top 15px; color var(--accent); font-size 12px;请勿用于商业倒卖div
        div
        
        div class=resource-card
          h3更多资源h3
          p即将更新更多精彩内容p
          a href=# class=btn敬请期待a
        div
      div
    div
  section
  
  footer
    div class=container
      div class=footer-links
        a href=#首页a
        a href=#resources资源a
        a href=#about关于a
        a href=#contact联系a
      div
      p class=copyright© 2023 xiaolu. 保留所有权利p
    div
  footer

  !-- 引入粒子效果库 --
  script src=httpscdn.jsdelivr.netparticles.js2.0.0particles.min.jsscript
  script
     初始化粒子效果
    document.addEventListener('DOMContentLoaded', function() {
      particlesJS('particles-js', {
        particles {
          number {
            value 80,
            density {
              enable true,
              value_area 800
            }
          },
          color {
            value #4895ef
          },
          shape {
            type circle,
            stroke {
              width 0,
              color #000000
            },
            polygon {
              nb_sides 5
            }
          },
          opacity {
            value 0.5,
            random false,
            anim {
              enable false,
              speed 1,
              opacity_min 0.1,
              sync false
            }
          },
          size {
            value 3,
            random true,
            anim {
              enable false,
              speed 40,
              size_min 0.1,
              sync false
            }
          },
          line_linked {
            enable true,
            distance 150,
            color #4361ee,
            opacity 0.4,
            width 1
          },
          move {
            enable true,
            speed 2,
            direction none,
            random false,
            straight false,
            out_mode out,
            bounce false,
            attract {
              enable false,
              rotateX 600,
              rotateY 1200
            }
          }
        },
        interactivity {
          detect_on canvas,
          events {
            onhover {
              enable true,
              mode grab
            },
            onclick {
              enable true,
              mode push
            },
            resize true
          },
          modes {
            grab {
              distance 140,
              line_linked {
                opacity 1
              }
            },
            bubble {
              distance 400,
              size 40,
              duration 2,
              opacity 8,
              speed 3
            },
            repulse {
              distance 200,
              duration 0.4
            },
            push {
              particles_nb 4
            },
            remove {
              particles_nb 2
            }
          }
        },
        retina_detect true
      });
    });
  script
body
html