以下是一个简单却新颖的单页个人网页设计示例（2026 年流行趋势向），采用纯HTML + CSS（无框架、无 JS 依赖），体积小、加载快、手机友好。
核心创意点：
- 不对称分块布局+微妙的渐变悬停（现代感强）
- 玻璃态卡片（glassmorphism，轻盈未来感）
- 日夜主题切换（纯 CSS 实现，简单有趣）
- 极简 + 个性签名式排版
- 单页滚动，适合介绍自己、展示作品、联系方式
直接复制保存为index.html即可在浏览器打开。
<!DOCTYPEhtml><htmllang="zh"data-theme="dark"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>重阳 | Las Vegas Dreamer</title><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@700&display=swap"rel="stylesheet"><style>:root{--bg:#0f0f17;--text:#e0e0ff;--accent:#00d4ff;--card:rgba(30,30,60,0.4);--glass:rgba(255,255,255,0.07);--border:rgba(0,212,255,0.18);}[data-theme="light"]{--bg:#f8f9ff;--text:#1a1a3d;--accent:#0066cc;--card:rgba(255,255,255,0.75);--glass:rgba(255,255,255,0.65);--border:rgba(0,102,204,0.15);}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;transition:background 0.6s ease,color 0.6s ease;}header{height:100vh;min-height:680px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;background:linear-gradient(135deg,#0a0a1f 0%,#1a0033 100%);position:relative;overflow:hidden;}header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(0,212,255,0.12)0%,transparent 50%);pointer-events:none;}.theme-toggle{position:absolute;top:1.5rem;right:1.5rem;background:var(--glass);backdrop-filter:blur(10px);border:1px solidvar(--border);color:var(--text);padding:0.6rem 1rem;border-radius:50px;cursor:pointer;font-size:0.9rem;transition:all 0.3s ease;}.theme-toggle:hover{background:var(--accent);color:white;transform:translateY(-2px);}h1{font-family:'Playfair Display',serif;font-size:clamp(3.5rem,12vw,9rem);letter-spacing:-0.05em;margin-bottom:0.8rem;background:linear-gradient(90deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}.tagline{font-size:1.4rem;max-width:600px;opacity:0.9;margin-bottom:2.5rem;}.scroll-hint{position:absolute;bottom:2rem;font-size:0.9rem;opacity:0.6;animation:float 3s infinite ease-in-out;}@keyframesfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}main{max-width:1100px;margin:0 auto;padding:4rem 1.5rem;}section{margin-bottom:8rem;}.glass-card{background:var(--glass);backdrop-filter:blur(16px);border:1px solidvar(--border);border-radius:1.2rem;padding:2.5rem;margin:2rem 0;transition:all 0.4scubic-bezier(0.165,0.84,0.44,1);box-shadow:0 8px 32pxrgba(0,0,0,0.25);}.glass-card:hover{transform:translateY(-8px)scale(1.015);box-shadow:0 20px 60pxrgba(0,212,255,0.15);}h2{font-size:2.2rem;margin-bottom:1.5rem;color:var(--accent);}.skills{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;}.skill-tag{background:rgba(0,212,255,0.1);border:1px solidvar(--border);padding:0.5rem 1.2rem;border-radius:50px;font-size:0.95rem;}.contact-links a{display:inline-block;margin:0.8rem 1.2rem 0 0;color:var(--accent);text-decoration:none;font-weight:500;transition:all 0.3s;}.contact-links a:hover{transform:translateY(-3px);text-shadow:0 0 12pxvar(--accent);}footer{text-align:center;padding:3rem 1rem;font-size:0.9rem;opacity:0.7;border-top:1px solidvar(--border);}@media(max-width:768px){h1{font-size:5.5rem;}.glass-card{padding:1.8rem;}}</style></head><body><buttonclass="theme-toggle"onclick="document.documentElement.dataset.theme=document.documentElement.dataset.theme==='light'?'dark':'light'">切换日/夜</button><header><h1>重阳</h1><pclass="tagline">Las Vegas 的码农 / 深夜思考者 / 偶尔写点代码和人生</p><divclass="scroll-hint">↓ 向下滚动 看看我都干了些什么</div></header><main><sectionid="about"><divclass="glass-card"><h2>关于我</h2><p>坐标拉斯维加斯，日常写 Python / C++ / 网络运维相关的东西。<br>喜欢把复杂问题拆成小块，然后用最优雅的方式解决。<br>也喜欢凌晨三点的霓虹灯和无人问津的哲学问题。</p></div></section><sectionid="skills"><divclass="glass-card"><h2>技能栈（2026 版）</h2><divclass="skills"><spanclass="skill-tag">Python</span><spanclass="skill-tag">C++20/23</span><spanclass="skill-tag">FastAPI</span><spanclass="skill-tag">网络工程（CCNA/CCNP）</span><spanclass="skill-tag">数据分析 & 可视化</span><spanclass="skill-tag">HTML/CSS (现代写法)</span><spanclass="skill-tag">Git & Markdown</span><spanclass="skill-tag">熬夜写代码</span></div></div></section><sectionid="projects"><divclass="glass-card"><h2>近期项目 / 兴趣</h2><ulstyle="padding-left:1.8rem;margin-top:1rem;opacity:0.9;"><li>人生重开模拟器（Python 流程控制实战）</li><li>路由器知识要点整理（50条精华版）</li><li>个人网页实验场（就是你现在看到的这个）</li><li>深夜刷 LeetCode + Codeforces</li><li>收集拉斯维加斯最酷的霓虹招牌</li></ul></div></section><sectionid="contact"><divclass="glass-card"><h2>联系我</h2><pstyle="margin:1.5rem 0;">想聊代码、职业规划、拉斯维加斯美食，或者单纯吐槽生活，都欢迎～</p><divclass="contact-links"><ahref="mailto:your.email@example.com">Email</a><ahref="https://github.com/yourusername"target="_blank">GitHub</a><ahref="https://x.com/yourhandle"target="_blank">X / Twitter</a></div></div></section></main><footer>© 2026 重阳 • Built with pure HTML + CSS • Las Vegas, NV</footer></body></html>为什么这个设计“新颖 + 简单”？
- 2025–2026 流行元素：玻璃态 + 渐变文字 + 主题切换 + 不对称留白 + 大标题冲击力
- 零 JS 依赖（主题切换用纯 CSS>想再个性化？
- 把邮箱、GitHub、X 链接改成你真实的
- 换掉 h1 名字和 tagline
- 想加头像？在 header 加
<img src="your-avatar.jpg" style="width:180px; height:180px; border-radius:50%; margin-bottom:1.5rem; border:3px solid var(--accent);"> - 想加粒子背景或打字机效果？可以稍后加一点 JS（但保持简单原则）
如果需要更暗黑/赛博朋克风、或者加入微动画版本，告诉我你的偏好，我再给你改版！
)
