html制作的PPT（各种风格）提示词
「39 html制作的PPT（各种风格）提示词」
/~c2653YlhoP~:/
链接：https://pan.quark.cn/s/d1c14664c484
网页当PPT用
Lieflat HTML Design 模板提示词使用指南
本目录包含Lieflat HTML Design项目的所有模板生成提示词，可以直接提供给AI生成对应内容。
目录结构
模板提示词/ ├── 00-使用指南.md (本文件) ├── 01-Deck模板总览.md ├── 02-小红书长文模板总览.md ├── 03-小红书封面模板总览.md ├── [各Deck模板].md (12个) ├── [各长文模板].md (8个) └── [各封面模板].md (11个)模板分类
1. Deck 模板 (横向演示文稿)
用途: 投资路演、产品发布、技术分享
比例: 16:9 横向
格式: HTML单文件
数量: 12个模板
模板列表:
Y2K-Brand-Manual.md - Y2K风格品牌手册
Geek-Report.md - 极客技术报告
Clean-Review.md - 极简评测
Editorial.md - 杂志风格
Consulting-Report.md - 咨询报告
Pixel-Report.md - 像素风格
Dot-Matrix-Light-Dark.md - 点阵技术风格
Shiny-Tiles.md - 光泽瓷砖风格
Rain-Notes.md - 雨天笔记
Story-Field.md - 故事田野
Studio-Photo.md - 摄影工作室
Sunrise.md - 日出奢华风格
2. 小红书长文模板 (3:5竖向长图)
用途: 小红书长图笔记
比例: 3:5 竖向
尺寸: 600x1000px (CSS) / 1200x2000px (导出)
数量: 8个详细模板
模板列表:
XHS-Rain-Notes-长文.md - 雨天笔记风格
XHS-Clean-Review-长文.md - 结论先行评测
XHS-Geek-Report-长文.md - 极客技术报告
XHS-Consulting-Report-长文.md - 咨询行业报告
XHS-Editorial-长文.md - 杂志观点文章
XHS-Terminal-长文.md - 终端技术风格
3. 小红书封面模板 (3:4竖向封面)
用途: 小红书笔记封面图
比例: 3:4 竖向
尺寸: 600x800px (CSS) / 1200x1600px (导出)
数量: 11个模板
模板列表:
XHS-Cover-Clean-Review.md - 红色评测封面
XHS-Cover-Editorial.md - 杂志观点封面
XHS-Cover-Geek-Report.md - 极客报告封面
XHS-Cover-Sunrise.md - 日出哲学封面
XHS-Cover-Dot-Matrix.md - 点阵技术封面
XHS-Cover-Consulting-Report.md - 咨询报告封面
XHS-Cover-Rain-Notes.md - 雨天笔记封面
XHS-Cover-Pixel-Report.md - 像素风格封面
XHS-Cover-Shiny-Tiles.md - 光泽科技封面
XHS-Cover-Story-Field.md - 故事田野封面
XHS-Cover-Terminal.md - 终端命令行封面
快速选择指南
按内容类型选择
产品测评类
Deck: Clean-Review, Geek-Report, Pixel-Report
长文: XHS-Clean-Review-长文, XHS-Geek-Report-长文
封面: XHS-Cover-Clean-Review, XHS-Cover-Pixel-Report
技术分析类
Deck: Geek-Report, Dot-Matrix-Light-Dark, Pixel-Report
长文: XHS-Geek-Report-长文, XHS-Terminal-长文
封面: XHS-Cover-Geek-Report, XHS-Cover-Terminal, XHS-Cover-Dot-Matrix
品牌故事类
Deck: Editorial, Story-Field, Sunrise
长文: XHS-Editorial-长文
封面: XHS-Cover-Editorial, XHS-Cover-Sunrise
商业分析类
Deck: Consulting-Report
长文: XHS-Consulting-Report-长文
封面: XHS-Cover-Consulting-Report
个人思考类
Deck: Rain-Notes
长文: XHS-Rain-Notes-长文
封面: XHS-Cover-Rain-Notes
按风格选择
专业/商务
Consulting-Report (咨询报告)
Clean-Review (极简评测)
Editorial (杂志风格)
技术/极客
Geek-Report (极客报告)
Pixel-Report (像素风格)
Dot-Matrix (点阵技术)
Terminal (终端风格)
创意/艺术
Y2K-Brand-Manual (Y2K风格)
Story-Field (故事田野)
Studio-Photo (摄影工作室)
情感/氛围
Rain-Notes (雨天笔记)
Sunrise (日出奢华)
Shiny-Tiles (光泽科技)
使用方法
1. 选择合适的模板
根据内容类型和风格偏好，从总览文件中选择合适的模板。
2. 复制提示词
打开对应的MD文件，复制"完整生成提示词"部分的代码块。
3. 填写内容
将提示词中的
[填写你的...]占位符替换为实际内容。4. 提交给AI
将完整的提示词提交给AI，生成HTML文件。
5. 导出使用
将生成的HTML在浏览器中打开，截图或导出为图片使用。
提示词结构说明
每个模板的提示词包含以下部分：
1. 模板概述
ID、名称、语言、格式等基本信息
2. 设计风格
核心特征、色彩方案、设计元素
3. 使用场景
最佳使用场景和避免使用场景
4. 目标受众
适合的受众群体
5. 完整生成提示词
可直接使用的代码块提示词
6. 内容建议
示例内容和使用建议
7. 注意事项
重要的注意事项
技术规格
Deck模板
比例: 16:9
推荐分辨率: 1920x1080
交互: 横向滚动
导航: 键盘方向键
长文模板
比例: 3:5
CSS尺寸: 600x1000px
导出尺寸: 1200x2000px
格式: 竖向长图
封面模板
比例: 3:4
CSS尺寸: 600x800px
导出尺寸: 1200x1600px
格式: 封面图
常见问题
Q: 如何选择合适的模板？
A: 根据内容类型和目标受众选择。参考"快速选择指南"部分。
Q: 可以修改模板吗？
A: 可以，提示词只是参考，可以根据需要调整。
Q: 导出的图片怎么用？
A: 可以直接发布到小红书、朋友圈等平台。
Q: HTML文件怎么打开？
A: 用浏览器打开即可，建议使用Chrome。
Q: 如何保证最佳效果？
A: 确保内容与模板风格匹配，遵循模板的设计规范。
更新日志
2026-05-27: 初始版本，包含34个模板的提示词
联系方式
如有问题或建议，请参考原项目文档。
注意: 本提示词集基于Lieflat HTML Design项目整理，遵循原项目的使用规范和设计理念。
生成代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jetson Edge 3DGS-SLAM - Clean Review</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root { --color-black: #111110; --color-light-gray: #F2F0EC; --color-dark-gray: #E6E4E0; --color-text: #1A1A18; --color-muted: #7A7A72; --color-accent: #F05A3E; --color-white: #FFFFFF; --gradient-red: linear-gradient(135deg, #E83028, #F05540, #F0834A, #F4A96A); --max-width: 1180px; --slide-padding: 80px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; background: var(--color-light-gray); color: var(--color-text); -webkit-font-smoothing: antialiased; } /* Scroll Container */ .presentation { display: flex; width: 1000vw; /* 10 slides */ height: 100vh; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* Slide Base */ .slide { width: 100vw; height: 100vh; min-width: 100vw; display: flex; align-items: center; justify-content: center; padding: var(--slide-padding); position: relative; overflow: hidden; } .slide-content { width: 100%; max-width: var(--max-width); height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; } /* Backgrounds */ .bg-gradient-red { background: var(--gradient-red); } .bg-black { background: var(--color-black); } .bg-light-gray { background: var(--color-light-gray); } .bg-white { background: var(--color-white); } .bg-dark-gray { background: var(--color-dark-gray); } /* Typography */ .text-white { color: var(--color-white); } .text-black { color: var(--color-black); } .text-muted { color: var(--color-muted); } .text-accent { color: var(--color-accent); } .heading-xl { font-size: clamp(48px, 5vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } .heading-lg { font-size: clamp(36px, 3.5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .heading-md { font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; line-height: 1.2; } .heading-sm { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; line-height: 1.3; } .body-lg { font-size: clamp(16px, 1.2vw, 20px); font-weight: 400; line-height: 1.6; } .body-md { font-size: clamp(14px, 1vw, 16px); font-weight: 400; line-height: 1.6; } .label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } /* Animations */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .fade-up.visible { opacity: 1; transform: translateY(0); } .anim-d1 { transition-delay: 0.1s; } .anim-d2 { transition-delay: 0.2s; } .anim-d3 { transition-delay: 0.3s; } .anim-d4 { transition-delay: 0.4s; } .anim-d5 { transition-delay: 0.5s; } /* Cards */ .card { border-radius: 12px; padding: 32px; background: var(--color-white); border: 2px solid var(--color-dark-gray); } .card-dark { background: var(--color-black); border-color: #333; color: var(--color-white); } .card-stat { background: var(--color-white); border: 2px solid var(--color-dark-gray); border-radius: 12px; padding: 40px 32px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } /* Grid System */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* Navigation */ .nav-dots { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 1000; background: rgba(255,255,255,0.9); padding: 12px 24px; border-radius: 100px; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .nav-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-dark-gray); cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .nav-dot.active { background: var(--color-accent); transform: scale(1.3); } .nav-dot:hover { background: var(--color-muted); } /* Arrow Controls */ .nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-dark-gray); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .nav-arrow:hover { background: var(--color-black); border-color: var(--color-black); } .nav-arrow:hover svg { stroke: var(--color-white); } .nav-arrow.prev { left: 24px; } .nav-arrow.next { right: 24px; } .nav-arrow.hidden { opacity: 0; pointer-events: none; } /* Progress Bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-accent); z-index: 1000; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Slide Number */ .slide-number { position: absolute; top: 40px; left: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.4; } /* Specific Slide Styles */ /* Slide 1: Cover */ .slide-cover .slide-content { align-items: flex-start; justify-content: center; } .slide-cover .label { color: rgba(255,255,255,0.7); margin-bottom: 24px; } .slide-cover .heading-xl { color: var(--color-white); margin-bottom: 24px; max-width: 800px; } .slide-cover .body-lg { color: rgba(255,255,255,0.85); max-width: 600px; } /* Slide 2: Problem */ .slide-problem .card-dark { padding: 48px; } .problem-list { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .problem-item { display: flex; align-items: flex-start; gap: 16px; } .problem-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--gradient-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Slide 3: Opportunity */ .stat-number { font-size: clamp(36px, 3vw, 48px); font-weight: 800; color: var(--color-accent); margin-bottom: 8px; } .stat-label { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; } .stat-desc { font-size: 13px; color: var(--color-muted); line-height: 1.5; } /* Slide 5: Process */ .process-flow { display: flex; align-items: center; gap: 16px; margin-top: 48px; } .process-step { flex: 1; background: var(--color-white); border: 2px solid var(--color-dark-gray); border-radius: 12px; padding: 32px 24px; text-align: center; position: relative; } .process-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--color-black); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin: 0 auto 16px; } .process-arrow { color: var(--color-muted); flex-shrink: 0; } /* Slide 6: Results */ .result-card { background: var(--color-white); border: 2px solid var(--color-dark-gray); border-radius: 12px; padding: 32px; text-align: center; } .result-value { font-size: clamp(32px, 2.5vw, 44px); font-weight: 800; color: var(--color-accent); margin-bottom: 8px; } .result-label { font-size: 14px; font-weight: 600; color: var(--color-text); } .quote-box { margin-top: 48px; padding: 32px 40px; border-left: 4px solid var(--color-accent); background: var(--color-light-gray); border-radius: 0 12px 12px 0; } .quote-text { font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; font-style: italic; color: var(--color-text); line-height: 1.5; } /* Slide 8: Comparison Table */ .comparison-table { width: 100%; border-collapse: collapse; margin-top: 32px; } .comparison-table th, .comparison-table td { padding: 20px 24px; text-align: left; border-bottom: 2px solid var(--color-dark-gray); } .comparison-table th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); background: transparent; } .comparison-table td { font-size: 15px; font-weight: 500; } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table .highlight-row { background: var(--color-white); border-radius: 12px; } .comparison-table .highlight-row td { border-bottom: none; font-weight: 700; } .badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; } .badge-success { background: rgba(240, 90, 62, 0.1); color: var(--color-accent); } .badge-warn { background: rgba(26, 26, 24, 0.06); color: var(--color-muted); } /* Slide 9: Team */ .team-card { background: var(--color-white); border: 2px solid var(--color-dark-gray); border-radius: 12px; padding: 32px; } .team-role { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin-bottom: 8px; } .team-name { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; } .team-desc { font-size: 14px; color: var(--color-muted); line-height: 1.5; } .advice-card { background: var(--color-black); border-radius: 12px; padding: 32px; color: var(--color-white); } /* Slide 10: Conclusion */ .verdict-box { background: var(--color-white); border: 2px solid var(--color-dark-gray); border-radius: 16px; padding: 48px; text-align: center; margin-bottom: 48px; } .verdict-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: 16px; } .verdict-text { font-size: clamp(28px, 2.5vw, 40px); font-weight: 800; color: var(--color-text); line-height: 1.2; } .data-bar-container { background: var(--color-white); border-radius: 12px; padding: 40px 48px; } .data-bar-label { display: flex; justify-content: space-between; margin-bottom: 16px; font-weight: 600; } .data-bar-track { width: 100%; height: 12px; background: var(--color-dark-gray); border-radius: 100px; overflow: hidden; } .data-bar-fill { height: 100%; background: var(--gradient-red); border-radius: 100px; width: 0%; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .data-bar-fill.animate { width: 100%; } /* Responsive */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .process-flow { flex-wrap: wrap; } .process-arrow { display: none; } } @media (max-width: 768px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .slide { padding: 40px 24px; } .nav-arrow { display: none; } } /* Scrollbar hide */ ::-webkit-scrollbar { display: none; } body { -ms-overflow-style: none; scrollbar-width: none; } </style> </head> <body> <!-- Progress Bar --> <div class="progress-bar" id="progressBar"></div> <!-- Navigation Arrows --> <button class="nav-arrow prev" id="prevBtn" onclick="goToSlide(currentSlide - 1)"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A18" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <polyline points="15 18 9 12 15 6"></polyline> </svg> </button> <button class="nav-arrow next" id="nextBtn" onclick="goToSlide(currentSlide + 1)"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A18" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </button> <!-- Presentation --> <div class="presentation" id="presentation"> <!-- Slide 1: Cover --> <section class="slide bg-gradient-red slide-cover"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Python Geek Report - Cover</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root { --paper: #e2deda; --text-main: #292929; --text-muted: #6b6b6b; --accent-red: #eb4e3d; --accent-blue: #8ba5ba; --terminal-bg: #f5f2ef; --terminal-border: #c8c4c0; --shadow: rgba(0, 0, 0, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background: #d5d0cb; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Courier New', monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 主画布 */ .canvas { width: 600px; height: 800px; background: var(--paper); position: relative; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.10); } /* 纸张纹理 */ .canvas::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(0,0,0,0.015) 31px, rgba(0,0,0,0.015) 32px ); pointer-events: none; z-index: 1; } /* 顶部装饰线 */ .top-rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--text-main); z-index: 10; } .top-rule::after { content: ''; position: absolute; top: 8px; left: 48px; right: 48px; height: 1px; background: var(--terminal-border); } /* 内容区域 */ .content { position: relative; z-index: 5; padding: 52px 48px 40px 48px; height: 100%; display: flex; flex-direction: column; } /* 终端窗口 */ .terminal { background: var(--terminal-bg); border: 1.5px solid var(--terminal-border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8); } /* 终端标题栏 */ .terminal-header { background: linear-gradient(180deg, #eae7e3, #ddd9d4); border-bottom: 1.5px solid var(--terminal-border); padding: 10px 16px; display: flex; align-items: center; gap: 10px; } .terminal-btn { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .btn-red { background: #ff5f57; } .btn-yellow { background: #febc2e; } .btn-green { background: #28c840; } .terminal-title { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; } /* 终端主体 */ .terminal-body { padding: 24px 28px 28px 28px; } /* 命令提示行 */ .prompt-line { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; } .prompt-user { color: var(--accent-blue); font-weight: 600; } .prompt-sep { color: var(--text-muted); } .prompt-host { color: var(--accent-red); font-weight: 600; } .prompt-path { color: var(--text-muted); } .prompt-dollar { color: var(--text-main); font-weight: 700; margin-left: 4px; } .command { color: var(--text-main); font-weight: 500; } .command-arg { color: var(--accent-blue); } /* 光标 */ .cursor { display: inline-block; width: 8px; height: 16px; background: var(--accent-red); margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: text-bottom; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* 分隔线 */ .divider { height: 1px; background: var(--terminal-border); margin: 20px 0; position: relative; } .divider::before { content: '//'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--terminal-bg); padding: 0 12px; font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; } /* 主标题区 */ .hero { margin-top: 4px; } .hero-title { font-size: 36px; font-weight: 800; color: var(--text-main); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; } .hero-subtitle { font-size: 18px; font-weight: 400; color: var(--text-muted); line-height: 1.5; } /* 输出列表 */ .output-section { margin-top: 20px; } .section-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-label::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--accent-red); } .output-list { list-style: none; } .output-list li { font-size: 14px; line-height: 2.2; color: var(--text-main); display: flex; align-items: center; gap: 10px; } .output-list li::before { content: '>'; color: var(--accent-blue); font-weight: 700; font-size: 12px; } .status-ok { color: var(--accent-red); font-weight: 700; } .status-wip { color: var(--accent-blue); font-weight: 600; } /* 技术参数区 */ .tech-section { margin-top: 20px; } .tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .tech-item { font-size: 13px; line-height: 1.6; } .tech-key { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; } .tech-value { color: var(--text-main); font-weight: 600; } /* 星级评分 */ .stars { color: var(--accent-red); font-size: 13px; letter-spacing: 1px; } .stars-dim { color: var(--terminal-border); } /* 底部状态 */ .status-bar { margin-top: auto; padding-top: 24px; } .status-line { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; } .status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(235, 78, 61, 0.15); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .status-text { color: var(--accent-red); font-weight: 700; } .date-line { font-size: 13px; color: var(--text-muted); padding-left: 18px; } /* 底部装饰 */ .bottom-deco { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--text-main); } .bottom-deco::before { content: ''; position: absolute; bottom: 10px; left: 48px; right: 48px; height: 1px; background: var(--terminal-border); } /* 角落标记 */ .corner-mark { position: absolute; font-size: 10px; font-weight: 700; color: var(--text-muted); opacity: 0.4; letter-spacing: 0.1em; } .corner-tl { top: 16px; left: 16px; } .corner-tr { top: 16px; right: 16px; } .corner-bl { bottom: 16px; left: 16px; } .corner-br { bottom: 16px; right: 16px; } /* 打印点阵装饰 */ .dot-matrix { position: absolute; right: 48px; top: 160px; display: grid; grid-template-columns: repeat(4, 4px); gap: 6px; opacity: 0.15; } .dot-matrix span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-main); } /* 纸张边缘阴影 */ .paper-edge-left { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.04) 80%, transparent); } .paper-edge-right { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.04) 80%, transparent); } </style> </head> <body> <div class="canvas"> <!-- 纸张边缘 --> <div class="paper-edge-left"></div> <div class="paper-edge-right"></div> <!-- 顶部装饰 --> <div class="top-rule"></div> <!-- 角落标记 --> <div class="corner-mark corner-tl">PY-2026-001</div> <div class="corner-mark corner-tr">GEEK REPORT</div> <div class="corner-mark corner-bl">v1.0.0</div> <div class="corner-mark corner-br">◼ ◼ ◼</div> <!-- 点阵装饰 --> <div class="dot-matrix"> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> </div> <!-- 内容 --> <div class="content"> <!-- 终端窗口 --> <div class="terminal"> <div class="terminal-header"> <div class="terminal-btn btn-red"></div> <div class="terminal-btn btn-yellow"></div> <div class="terminal-btn btn-green"></div> <div class="terminal-title">python@dev — learn.py</div> </div> <div class="terminal-body"> <!-- 命令行 --> <div class="prompt-line"> <span class="prompt-user">coder</span> <span class="prompt-sep">@</span> <span class="prompt-host">macbook</span> <span class="prompt-path">~/python-journey</span> <span class="prompt-dollar">$</span> <span class="command">python learn.py</span> <span class="command-arg">--track=backend</span> <span class="cursor"></span> </div> <!-- 分隔线 --> <div class="divider"></div> <!-- 主标题 --> <div class="hero"> <div class="hero-title">Python<br>学习路线图</div> <div class="hero-subtitle">从入门到工程化 // 后端开发方向</div> </div> <!-- 学习阶段输出 --> <div class="output-section"> <div class="section-label">Learning Stages</div> <ul class="output-list"> <li>基础语法与数据结构 <span class="status-ok">✓</span></li> <li>面向对象与函数式编程 <span class="status-ok">✓</span></li> <li>并发编程 (asyncio / multiprocessing) <span class="status-wip">…</span></li> <li>Web 框架 (Flask / FastAPI) <span class="status-wip">…</span></li> <li>数据库与 ORM (SQLAlchemy) <span class="status-wip">…</span></li> <li>系统设计与工程化 <span class="status-wip">…</span></li> </ul> </div> <!-- 技术参数 --> <div class="tech-section"> <div class="section-label">Tech Stack</div> <div class="tech-grid"> <div class="tech-item"> <div class="tech-key">Version</div> <div class="tech-value">Python 3.12</div> </div> <div class="tech-item"> <div class="tech-key">Level</div> <div class="tech-value">Intermediate → Advanced</div> </div> <div class="tech-item"> <div class="tech-key">NumPy</div> <div class="stars">★★★★<span class="stars-dim">☆</span></div> </div> <div class="tech-item"> <div class="tech-key">Flask</div> <div class="stars">★★★★<span class="stars-dim">☆</span></div> </div> <div class="tech-item"> <div class="tech-key">Pandas</div> <div class="stars">★★★<span class="stars-dim">☆☆</span></div> </div> <div class="tech-item"> <div class="tech-key">FastAPI</div> <div class="stars">★★<span class="stars-dim">☆☆☆</span></div> </div> </div> </div> </div> </div> <!-- 底部状态栏 --> <div class="status-bar"> <div class="status-line"> <div class="status-indicator"></div> <span class="status-text">Learning in Progress...</span> </div> <div class="date-line">2026.05.27 // 持续更新中</div> </div> </div> <!-- 底部装饰 --> <div class="bottom-deco"></div> </div> </body> </html>