317 lines
23 KiB
HTML
317 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>用户主页 · 模板预览</title>
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:#eef0f3; color:#1e293b; }
|
||
.page-head { text-align:center; padding:36px 16px 10px; }
|
||
.page-head h1 { font-size:24px; font-weight:800; }
|
||
.page-head p { color:#64748b; font-size:13px; margin-top:6px; }
|
||
.tmpl { max-width:1000px; margin:32px auto; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.08); }
|
||
.tmpl-head { padding:14px 22px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px; }
|
||
.tmpl-head .no { font-size:12px; font-weight:800; color:#fff; background:#667eea; border-radius:8px; padding:3px 10px; }
|
||
.tmpl-head .tag { font-size:11px; color:#64748b; background:#f1f5f9; border-radius:6px; padding:2px 8px; }
|
||
.tmpl-head h2 { font-size:16px; font-weight:700; }
|
||
.tmpl-head .src { font-size:11px; color:#94a3b8; margin-left:auto; }
|
||
|
||
/* ============ 共享数据 ============ */
|
||
.avatar { border-radius:50%; object-fit:cover; }
|
||
.tagchip { font-size:11px; color:#667eea; background:#f0f4ff; border-radius:6px; padding:2px 8px; }
|
||
.btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:8px; padding:8px 18px; cursor:pointer; border:none; }
|
||
.btn-primary { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
|
||
.btn-ghost { background:#f1f5f9; color:#475569; }
|
||
.stat-num { font-size:18px; font-weight:800; }
|
||
.stat-lbl { font-size:12px; color:#94a3b8; }
|
||
|
||
/* ============ 模板 0：当前 ============ */
|
||
.t0 { background:#f0f2f5; }
|
||
.t0-hero { background:linear-gradient(135deg,#667eea,#764ba2,#f093fb); padding:50px 40px; color:#fff; position:relative; overflow:hidden; }
|
||
.t0-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.12),transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.08),transparent 40%); }
|
||
.t0-avatar { width:110px; height:110px; border-radius:50%; border:4px solid rgba(255,255,255,.7); background:#764ba2; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:800; }
|
||
.t0-stats { display:flex; gap:0; margin:22px 0; }
|
||
.t0-stat { text-align:center; padding:0 26px; }
|
||
.t0-stat + .t0-stat { border-left:1px solid rgba(255,255,255,.3); }
|
||
|
||
/* ============ 模板 A：GitHub Profile ============ */
|
||
.tA { display:flex; min-height:500px; }
|
||
.tA-side { width:300px; background:#0d1117; color:#c9d1d9; padding:32px 26px; }
|
||
.tA-side .av { width:220px; height:220px; border-radius:50%; }
|
||
.tA-side h2 { color:#fff; font-size:20px; margin-top:16px; }
|
||
.tA-side .bio { font-size:13px; color:#8b949e; margin:10px 0 18px; line-height:1.6; }
|
||
.tA-meta { font-size:12px; color:#8b949e; display:flex; flex-direction:column; gap:8px; }
|
||
.tA-main { flex:1; background:#fff; padding:30px 36px; }
|
||
.tA-tabs { display:flex; gap:22px; border-bottom:1px solid #e5e7eb; padding-bottom:12px; margin-bottom:20px; }
|
||
.tA-tabs span { font-size:14px; color:#64748b; cursor:pointer; padding-bottom:14px; }
|
||
.tA-tabs .on { color:#667eea; border-bottom:2px solid #667eea; font-weight:700; }
|
||
.tA-card { border:1px solid #e5e7eb; border-radius:10px; padding:16px 18px; margin-bottom:14px; }
|
||
.tA-card h3 { font-size:15px; font-weight:700; color:#0969da; margin-bottom:6px; }
|
||
.tA-card p { font-size:13px; color:#57606a; line-height:1.6; }
|
||
.tA-card .meta { font-size:11px; color:#8b949e; margin-top:8px; display:flex; gap:12px; }
|
||
|
||
/* ============ 模板 B：小红书/微博封面 ============ */
|
||
.tB-hero { position:relative; height:280px; background:linear-gradient(135deg,#f093fb,#f5576c,#667eea); }
|
||
.tB-hero img { width:100%; height:100%; object-fit:cover; }
|
||
.tB-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.55)); }
|
||
.tB-body { position:relative; padding:0 40px 36px; }
|
||
.tB-avatar { position:absolute; top:-55px; left:40px; width:110px; height:110px; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.15); }
|
||
.tB-top { display:flex; justify-content:flex-end; gap:10px; padding-top:22px; }
|
||
.tB-info { margin-top:6px; }
|
||
.tB-info h2 { font-size:24px; font-weight:800; }
|
||
.tB-info .bio { color:#64748b; font-size:13px; margin:8px 0 14px; }
|
||
.tB-stats { display:flex; gap:34px; margin:16px 0; }
|
||
|
||
/* ============ 模板 C：掘金/CSDN 双栏 ============ */
|
||
.tC { display:flex; gap:24px; padding:28px; background:#f7f8fa; }
|
||
.tC-left { width:300px; }
|
||
.tC-card { background:#fff; border-radius:14px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); text-align:center; }
|
||
.tC-avatar { width:92px; height:92px; margin:0 auto; border-radius:50%; }
|
||
.tC-card h3 { font-size:18px; font-weight:800; margin-top:12px; }
|
||
.tC-card .role { display:inline-block; font-size:11px; background:#667eea15; color:#667eea; border-radius:6px; padding:2px 10px; margin-top:6px; font-weight:600; }
|
||
.tC-stats { display:flex; margin-top:18px; border-top:1px solid #f1f5f9; padding-top:16px; }
|
||
.tC-stats div { flex:1; text-align:center; }
|
||
.tC-right { flex:1; }
|
||
.tC-right .card { background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:14px; }
|
||
.tC-right .card h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
|
||
.tC-right .card p { font-size:13px; color:#64748b; }
|
||
|
||
/* ============ 模板 D：语雀极简 ============ */
|
||
.tD { padding:56px 40px; max-width:720px; margin:0 auto; }
|
||
.tD-avatar { width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; color:#fff; background:linear-gradient(135deg,#667eea,#764ba2); }
|
||
.tD-name { display:flex; align-items:center; gap:12px; margin-top:18px; }
|
||
.tD-name h2 { font-size:26px; font-weight:800; }
|
||
.tD-tag { font-size:11px; background:#f1f5f9; color:#64748b; border-radius:20px; padding:3px 12px; }
|
||
.tD-bio { color:#64748b; font-size:14px; line-height:1.7; margin:12px 0 20px; }
|
||
.tD-meta { display:flex; gap:20px; color:#94a3b8; font-size:12px; margin-bottom:30px; }
|
||
.tD-line { border-left:2px solid #e2e8f0; padding-left:24px; margin-left:8px; }
|
||
.tD-item { margin-bottom:26px; position:relative; }
|
||
.tD-item::before { content:''; position:absolute; left:-29px; top:6px; width:10px; height:10px; border-radius:50%; background:#667eea; }
|
||
|
||
/* ============ 模板 E：杂志编辑式 ============ */
|
||
.tE { background:#0f172a; color:#e2e8f0; }
|
||
.tE-hero { padding:48px 44px; display:flex; align-items:center; gap:30px; border-bottom:1px solid #1e293b; }
|
||
.tE-avatar { width:100px; height:100px; border-radius:50%; border:3px solid #f59e0b; }
|
||
.tE-hero h2 { font-size:26px; font-weight:800; color:#fff; }
|
||
.tE-hero .sub { color:#94a3b8; font-size:13px; margin-top:6px; }
|
||
.tE-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#f59e0b; background:#f59e0b1a; border:1px solid #f59e0b44; border-radius:20px; padding:3px 12px; }
|
||
.tE-stats { display:flex; gap:0; margin-top:18px; }
|
||
.tE-stat { padding:0 22px; }
|
||
.tE-stat + .tE-stat { border-left:1px solid #334155; }
|
||
.tE-featured { padding:34px 44px; }
|
||
.tE-featured h3 { font-size:13px; font-weight:700; color:#f59e0b; letter-spacing:2px; margin-bottom:16px; }
|
||
.tE-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
|
||
.tE-article { background:#1e293b; border-radius:12px; overflow:hidden; }
|
||
.tE-article .cover { height:110px; background:linear-gradient(135deg,#667eea,#764ba2); }
|
||
.tE-article .body { padding:14px 16px; }
|
||
.tE-article .body h4 { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
|
||
.tE-article .body p { font-size:12px; color:#94a3b8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-head">
|
||
<h1>用户主页 · PC 端模板预览</h1>
|
||
<p>当前模板 + 5 种主流风格方案 · 模拟桌面端</p>
|
||
</div>
|
||
|
||
<!-- ============ 模板 0：当前 ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no">0</span><h2>当前模板</h2><span class="tag">现状</span><span class="src">你项目现有</span></div>
|
||
<div class="t0">
|
||
<div class="t0-hero">
|
||
<div style="position:relative;z-index:1">
|
||
<div class="t0-avatar">R</div>
|
||
<h2 style="font-size:26px;font-weight:800;margin-top:18px">root <span style="font-size:14px;background:rgba(255,255,255,.25);border-radius:6px;padding:2px 10px">认证</span></h2>
|
||
<p style="color:rgba(255,255,255,.85);margin-top:6px">全栈工程师 · 专注于 Web 开发与分享</p>
|
||
<div style="margin-top:14px;display:flex;gap:18px;color:rgba(255,255,255,.75);font-size:13px">📍 上海 📅 2026-04 加入</div>
|
||
<div class="t0-stats">
|
||
<div class="t0-stat"><div class="stat-num">8</div><div class="stat-lbl" style="color:rgba(255,255,255,.7)">文章</div></div>
|
||
<div class="t0-stat"><div class="stat-num">128</div><div class="stat-lbl" style="color:rgba(255,255,255,.7)">粉丝</div></div>
|
||
<div class="t0-stat"><div class="stat-num">36</div><div class="stat-lbl" style="color:rgba(255,255,255,.7)">关注</div></div>
|
||
<div class="t0-stat"><div class="stat-num">1.2w</div><div class="stat-lbl" style="color:rgba(255,255,255,.7)">获赞</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:12px;margin-top:10px">
|
||
<button class="btn btn-primary">✏️ 编辑资料</button>
|
||
<button class="btn btn-ghost">⚙️ 账户设置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:24px;display:flex;gap:24px;background:#fff">
|
||
<div style="flex:1">
|
||
<div style="display:flex;gap:22px;border-bottom:2px solid #f1f5f9;margin-bottom:18px">
|
||
<span style="font-size:14px;font-weight:700;color:#667eea;border-bottom:2px solid #667eea;padding-bottom:12px">📄 文章 (8)</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:12px">📚 学习 (0)</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:12px">⚡ 动态</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:12px">⭐ 收藏 (0)</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<div style="border:1px solid #e8ecf1;border-radius:12px;overflow:hidden"><div style="height:100px;background:linear-gradient(135deg,#667eea,#764ba2)"></div><div style="padding:12px 14px"><div style="font-size:14px;font-weight:700">CSS Grid 布局完全指南</div><div style="font-size:12px;color:#94a3b8;margin-top:6px">👁 1.2w · 👍 356</div></div></div>
|
||
<div style="border:1px solid #e8ecf1;border-radius:12px;overflow:hidden"><div style="height:100px;background:linear-gradient(135deg,#4facfe,#00f2fe)"></div><div style="padding:12px 14px"><div style="font-size:14px;font-weight:700">Django REST Framework 最佳实践</div><div style="font-size:12px;color:#94a3b8;margin-top:6px">👁 8.9k · 👍 210</div></div></div>
|
||
</div>
|
||
</div>
|
||
<div style="width:250px;display:flex;flex-direction:column;gap:16px">
|
||
<div style="border:1px solid #e8ecf1;border-radius:12px;padding:16px"><div style="font-size:14px;font-weight:700;margin-bottom:10px">🚀 快捷操作</div><div style="font-size:13px;color:#64748b;padding:6px 0">✏️ 编辑资料</div><div style="font-size:13px;color:#64748b;padding:6px 0">👁 浏览历史</div><div style="font-size:13px;color:#64748b;padding:6px 0">⭐ 我的收藏</div></div>
|
||
<div style="border:1px solid #e8ecf1;border-radius:12px;padding:16px"><div style="font-size:14px;font-weight:700;margin-bottom:10px">🔥 积分信息</div><div style="display:flex;justify-content:space-between;font-size:13px;color:#64748b"><span>积分</span><b style="color:#1e293b">0</b></div><div style="display:flex;justify-content:space-between;font-size:13px;color:#64748b;margin-top:8px"><span>金币</span><b style="color:#1e293b">0</b></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 模板 A：GitHub Profile ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no" style="background:#0d1117">A</span><h2>GitHub Profile 风</h2><span class="tag">深色侧栏 + 内容流</span><span class="src">参考 GitHub</span></div>
|
||
<div class="tA">
|
||
<div class="tA-side">
|
||
<div class="av" style="background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:90px;font-weight:800">R</div>
|
||
<h2>root</h2>
|
||
<div class="bio">全栈工程师，专注 Web 开发、API 设计与技术分享。喜欢研究前沿技术。</div>
|
||
<div class="tA-meta">
|
||
<span>📍 上海</span>
|
||
<span>📅 2026 年 4 月加入</span>
|
||
<span>✉️ root@cola.dev</span>
|
||
<span>🏷️ <span class="tagchip">Python</span> <span class="tagchip">Django</span> <span class="tagchip">Vue</span></span>
|
||
</div>
|
||
<div style="margin-top:24px;display:flex;flex-direction:column;gap:10px">
|
||
<button class="btn btn-primary" style="width:100%;justify-content:center">✏️ 编辑资料</button>
|
||
</div>
|
||
</div>
|
||
<div class="tA-main">
|
||
<div class="tA-tabs"><span class="on">📄 文章 (8)</span><span>⭐ 收藏 (0)</span><span>📚 学习 (0)</span><span>⚡ 动态</span></div>
|
||
<div class="tA-card"><h3>CSS Grid 布局完全指南</h3><p>从基础到高级，全面掌握 CSS Grid 布局，创建复杂的响应式页面布局。</p><div class="meta"><span>⭐ 356</span><span>👁 1.2w</span><span>🕐 1 分钟</span><span style="margin-left:auto">技术教程</span></div></div>
|
||
<div class="tA-card"><h3>Django REST Framework 最佳实践</h3><p>掌握 Django REST Framework 的高级用法，构建健壮的 RESTful API。</p><div class="meta"><span>⭐ 210</span><span>👁 8.9k</span><span>🕐 2 分钟</span><span style="margin-left:auto">技术教程</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 模板 B：封面沉浸式 ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no" style="background:#f5576c">B</span><h2>封面沉浸式</h2><span class="tag">全宽封面 + 头像叠放</span><span class="src">参考微博/小红书</span></div>
|
||
<div>
|
||
<div class="tB-hero"><img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1000&h=400&fit=crop"></div>
|
||
<div class="tB-body">
|
||
<div class="tB-avatar" style="background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:46px;font-weight:800">R</div>
|
||
<div class="tB-top"><button class="btn btn-ghost">⚙️</button><button class="btn btn-primary">✏️ 编辑资料</button></div>
|
||
<div class="tB-info">
|
||
<h2>root</h2>
|
||
<div class="bio">全栈工程师 · 分享 Web 开发与学习笔记</div>
|
||
<div style="display:flex;gap:14px;font-size:12px;color:#94a3b8">📍 上海 · 2026-04 加入</div>
|
||
<div class="tB-stats">
|
||
<div><div class="stat-num">8</div><div class="stat-lbl">文章</div></div>
|
||
<div><div class="stat-num">128</div><div class="stat-lbl">粉丝</div></div>
|
||
<div><div class="stat-num">36</div><div class="stat-lbl">关注</div></div>
|
||
<div><div class="stat-num">1.2w</div><div class="stat-lbl">获赞</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="border-top:1px solid #f1f5f9;margin-top:18px;padding-top:18px;display:flex;gap:22px">
|
||
<span style="font-size:14px;font-weight:700;color:#f5576c;border-bottom:2px solid #f5576c;padding-bottom:10px">📄 文章</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:10px">⭐ 收藏</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:10px">📚 学习</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 模板 C：双栏 Dashboard ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no" style="background:#10b981">C</span><h2>双栏 Dashboard</h2><span class="tag">作者卡 + 内容流</span><span class="src">参考掘金/CSDN</span></div>
|
||
<div class="tC">
|
||
<div class="tC-left">
|
||
<div class="tC-card">
|
||
<div class="tC-avatar" style="background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;font-weight:800">R</div>
|
||
<h3>root</h3>
|
||
<span class="role">🏆 创作者</span>
|
||
<div style="font-size:12px;color:#94a3b8;margin-top:8px">全栈工程师</div>
|
||
<div class="tC-stats">
|
||
<div><div class="stat-num">8</div><div class="stat-lbl">文章</div></div>
|
||
<div><div class="stat-num">128</div><div class="stat-lbl">粉丝</div></div>
|
||
<div><div class="stat-num">1.2w</div><div class="stat-lbl">获赞</div></div>
|
||
</div>
|
||
<button class="btn btn-primary" style="width:100%;justify-content:center;margin-top:18px">✏️ 编辑资料</button>
|
||
</div>
|
||
<div class="tC-card" style="margin-top:16px;text-align:left">
|
||
<div style="font-size:14px;font-weight:700;margin-bottom:10px">📊 数据看板</div>
|
||
<div style="font-size:13px;color:#64748b;display:flex;justify-content:space-between;padding:5px 0"><span>积分</span><b>0</b></div>
|
||
<div style="font-size:13px;color:#64748b;display:flex;justify-content:space-between;padding:5px 0"><span>金币</span><b>0</b></div>
|
||
<div style="font-size:13px;color:#64748b;display:flex;justify-content:space-between;padding:5px 0"><span>今日阅读</span><b>+0%</b></div>
|
||
</div>
|
||
</div>
|
||
<div class="tC-right">
|
||
<div style="display:flex;gap:18px;margin-bottom:14px">
|
||
<span style="font-size:14px;font-weight:700;color:#10b981;border-bottom:2px solid #10b981;padding-bottom:8px">📄 文章</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:8px">⭐ 收藏</span>
|
||
<span style="font-size:14px;color:#94a3b8;padding-bottom:8px">📚 学习</span>
|
||
</div>
|
||
<div class="card"><div style="display:flex;gap:14px;align-items:center"><div style="width:80px;height:60px;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2)"></div><div><h4>CSS Grid 布局完全指南</h4><p>从基础到高级，全面掌握 CSS Grid 布局…</p></div></div></div>
|
||
<div class="card"><div style="display:flex;gap:14px;align-items:center"><div style="width:80px;height:60px;border-radius:8px;background:linear-gradient(135deg,#4facfe,#00f2fe)"></div><div><h4>Django REST Framework 最佳实践</h4><p>掌握 Django REST Framework 的高级用法…</p></div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 模板 D：语雀极简 ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no" style="background:#94a3b8">D</span><h2>语雀极简</h2><span class="tag">大留白 + 时间线</span><span class="src">参考语雀/Notion</span></div>
|
||
<div class="tD">
|
||
<div class="tD-avatar">R</div>
|
||
<div class="tD-name"><h2>root</h2><span class="tD-tag">全栈工程师</span><span class="tD-tag">技术分享</span></div>
|
||
<div class="tD-bio">热爱技术，乐于分享。记录学习与开发的点点滴滴，希望与你一起成长。</div>
|
||
<div class="tD-meta">
|
||
<span>📍 上海</span><span>📅 2026-04 加入</span><span>👥 128 粉丝</span><span>❤️ 1.2w 获赞</span>
|
||
</div>
|
||
<div style="display:flex;gap:14px;margin-bottom:36px">
|
||
<button class="btn btn-primary">✏️ 编辑资料</button>
|
||
<button class="btn btn-ghost">📋 个人主页</button>
|
||
</div>
|
||
<div style="display:flex;gap:26px;border-bottom:1px solid #e2e8f0;margin-bottom:26px">
|
||
<span style="font-size:14px;font-weight:700;color:#1e293b">📄 文章 <b style="color:#667eea">8</b></span>
|
||
<span style="font-size:14px;color:#94a3b8">⭐ 收藏</span>
|
||
<span style="font-size:14px;color:#94a3b8">📚 学习</span>
|
||
</div>
|
||
<div class="tD-line">
|
||
<div class="tD-item">
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><b style="font-size:15px">CSS Grid 布局完全指南</b><span style="font-size:12px;color:#94a3b8">2026-08-02</span></div>
|
||
<p style="font-size:13px;color:#64748b;margin:6px 0">从基础到高级，全面掌握 CSS Grid 布局，创建复杂的响应式页面布局。</p>
|
||
<div style="display:flex;gap:10px;margin-top:8px"><span class="tagchip">CSS</span><span class="tagchip">Grid</span><span class="tagchip">布局</span></div>
|
||
</div>
|
||
<div class="tD-item">
|
||
<div style="display:flex;justify-content:space-between;align-items:center"><b style="font-size:15px">Django REST Framework 最佳实践</b><span style="font-size:12px;color:#94a3b8">2026-08-01</span></div>
|
||
<p style="font-size:13px;color:#64748b;margin:6px 0">掌握 Django REST Framework 的高级用法，构建健壮的 RESTful API。</p>
|
||
<div style="display:flex;gap:10px;margin-top:8px"><span class="tagchip">Django</span><span class="tagchip">DRF</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 模板 E：杂志编辑式 ============ -->
|
||
<div class="tmpl">
|
||
<div class="tmpl-head"><span class="no" style="background:#f59e0b">E</span><h2>杂志编辑式</h2><span class="tag">暗色 + 金色点缀</span><span class="src">参考少数派作者页</span></div>
|
||
<div class="tE">
|
||
<div class="tE-hero">
|
||
<div class="tE-avatar" style="background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;font-weight:800">R</div>
|
||
<div style="flex:1">
|
||
<div style="display:flex;align-items:center;gap:12px"><h2>root</h2><span class="tE-badge">★ 认证创作者</span></div>
|
||
<div class="sub">全栈工程师 · 分享开发实战与前沿技术洞察</div>
|
||
<div class="tE-stats">
|
||
<div class="tE-stat"><div class="stat-num" style="color:#fff">8</div><div class="stat-lbl">文章</div></div>
|
||
<div class="tE-stat"><div class="stat-num" style="color:#fff">128</div><div class="stat-lbl">粉丝</div></div>
|
||
<div class="tE-stat"><div class="stat-num" style="color:#fff">1.2w</div><div class="stat-lbl">获赞</div></div>
|
||
<div class="tE-stat"><div class="stat-num" style="color:#f59e0b">365</div><div class="stat-lbl">影响力</div></div>
|
||
</div>
|
||
</div>
|
||
<button class="btn" style="background:#f59e0b;color:#0f172a">✏️ 编辑资料</button>
|
||
</div>
|
||
<div class="tE-featured">
|
||
<h3>EDITOR'S PICK · 精选文章</h3>
|
||
<div class="tE-grid">
|
||
<div class="tE-article"><div class="cover"></div><div class="body"><h4>CSS Grid 布局完全指南</h4><p>👁 1.2w · 技术教程</p></div></div>
|
||
<div class="tE-article"><div class="cover" style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div><div class="body"><h4>UI 设计原则</h4><p>👁 2.1k · 设计前沿</p></div></div>
|
||
<div class="tE-article"><div class="cover" style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div><div class="body"><h4>2026 前端趋势展望</h4><p>👁 5.6k · 行业洞察</p></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align:center;color:#94a3b8;font-size:12px;padding:10px 16px 36px">共 6 套：0 当前 · A GitHub · B 封面 · C 双栏 · D 极简 · E 杂志</div>
|
||
</body>
|
||
</html>
|