西门子PLC，手把手教你使用CTD减计数器
我将为您设计一个分层展示核心看点的CTD循环训练计划页面,这个设计将采用不对称布局和层次化的视觉语言，为每个层级打造独特的视觉身份。 html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CTD循环训练计划 - 核心看点分层解析</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=Playfair+Display:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg-deep: #0a0e17; --bg-surface: #111827; --bg-card: #1f2937; --accent-gold: #f59e0b; --accent-blue: #3b82f6; --accent-emerald: #10b981; --accent-rose: #f43f5e; --accent-violet: #8b5cf6; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --border-subtle: rgba(255, 255, 255, 0.08); --glass: rgba(255, 255, 255, 0.03); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-deep); color: var(--text-primary); font-family: 'Noto Sans SC', sans-serif; min-height: 100vh; overflow-x: hidden; position: relative; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.04) 0%, transparent 60%); pointer-events: none; z-index: 0; } .container { max-width: 1400px; margin: 0 auto; padding: 2rem; position: relative; z-index: 1; } header { text-align: center; margin-bottom: 4rem; padding-top: 3rem; animation: fadeIn 1s ease; } .title-wrapper { position: relative; display: inline-block; margin-bottom: 1.5rem; } .main-title { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .subtitle { font-size: 1.1rem; color: var(--text-secondary); font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; } .description { max-width: 700px; margin: 0 auto; color: var(--text-muted); line-height: 1.7; font-size: 1rem; } /* 分层导航 */ .layer-nav { display: flex; justify-content: center; gap: 0.5rem; margin: 3rem 0; flex-wrap: wrap; animation: slideUp 0.8s ease 0.2s both; } .nav-pill { padding: 0.75rem 1.5rem; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: 50px; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); } .nav-pill:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); transform: translateY(-2px); } .nav-pill.active { background: linear-gradient(135deg, var(--accent-gold), var(--accent-rose)); color: var(--bg-deep); border-color: transparent; box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); } /* 分层核心看点区域 */ .layers-container { display: grid; gap: 3rem; margin-top: 2rem; } .layer-section { position: relative; border-radius: 24px; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; animation: fadeInUp 0.8s ease both; } .layer-section:nth-child(1) { animation-delay: 0.3s; } .layer-section:nth-child(2) { animation-delay: 0.5s; } .layer-section:nth-child(3) { animation-delay: 0.7s; } .layer-section:nth-child(4) { animation-delay: 0.9s; } .layer-section:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .layer-header { padding: 2rem 2.5rem 1.5rem; position: relative; border-bottom: 1px solid var(--border-subtle); } .layer-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; } .layer-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; } .layer-description { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; max-width: 80%; } .layer-content { padding: 2rem 2.5rem 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .focus-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .focus-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 4px 0 0 4px; } .focus-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-4px); } .focus-number { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.75rem; letter-spacing: 0.05em; } .focus-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; line-height: 1.4; } .focus-details { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; } .focus-metrics { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } .metric { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; padding: 0.25rem 0.75rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; color: var(--text-muted); } /* 各层级特定样式 */ .layer-champion { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(244, 63, 94, 0.05) 100%); border: 1px solid rgba(245, 158, 11, 0.2); } .layer-champion .layer-tag { background: rgba(245, 158, 11, 0.15); color: var(--accent-gold); border: 1px solid rgba(245, 158, 11, 0.3); } .layer-champion .focus-card::before { background: linear-gradient(180deg, var(--accent-gold), var(--accent-rose)); } .layer-euro { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.05) 100%); border: 1px solid rgba(59, 130, 246, 0.2); } .layer-euro .layer-tag { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); border: 1px solid rgba(59, 130, 246, 0.3); } .layer-euro .focus-card::before { background: linear-gradient(180deg, var(--accent-blue), var(--accent-emerald)); } .layer-survival { background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%); border: 1px solid rgba(244, 63, 94, 0.2); } .layer-survival .layer-tag { background: rgba(244, 63, 94, 0.15); color: var(--accent-rose); border: 1px solid rgba(244, 63, 94, 0.3); } .layer-survival .focus-card::before { background: linear-gradient(180deg, var(--accent-rose), var(--accent-gold)); } .layer-rookie { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%); border: 1px solid rgba(139, 92, 246, 0.2); } .layer-rookie .layer-tag { background: rgba(139, 92, 246, 0.15); color: var(--accent-violet); border: 1px solid rgba(139, 92, 246, 0.3); } .layer-rookie .focus-card::before { background: linear-gradient(180deg, var(--accent-violet), var(--accent-blue)); } /* 底部总结 */ .summary-section { margin-top: 4rem; padding: 3rem; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: 24px; backdrop-filter: blur(20px); animation: fadeIn 1s ease 1.1s both; } .summary-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 1.5rem; text-align: center; } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; } .summary-item { text-align: center; padding: 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); transition: all 0.3s ease; } .summary-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-4px); } .summary-icon { font-size: 2rem; margin-bottom: 1rem; display: block; } .summary-label { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; } .summary-value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, var(--accent-gold), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } footer { text-align: center; margin-top: 4rem; padding: 2rem; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-subtle); } /* 动画 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* 响应式调整 */ @media (max-width: 768px) { .container { padding: 1rem; } .layer-header { padding: 1.5rem; } .layer-content { padding: 1.5rem; grid-template-columns: 1fr; } .layer-description { max-width: 100%; } .layer-nav { gap: 0.3rem; } .nav-pill { padding: 0.5rem 1rem; font-size: 0.8rem; } } /* 滚动指示器 */ .scroll-indicator { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue), var(--accent-emerald)); z-index: 1000; transition: width 0.1s ease; } </style> </head> <body> <div class="scroll-indicator" id="scrollIndicator"></div> <div class="container"> <header> <div class="subtitle">CTD循环训练体系</div> <div class="title-wrapper"> <h1 class="main-title">核心看点分层解析</h1> </div> <p class="description"> 基于竞技水平与发展阶段的差异化训练重点，为每个层级队伍量身定制的CTD循环训练核心策略与关键观察维度。 </p> </header> <div class="layer-nav"> <div class="nav-pill active">全部层级</div> <div class="nav-pill">争冠组</div> <div class="nav-pill">欧战/季后赛组</div> <div class="nav-pill">保级/乐透组</div> <div class="nav-pill">新军组</div> </div> <div class="layers-container"> <!-- 争冠组 --> <section class="layer-section layer-champion"> <div class="layer-header"> <div class="layer-tag"> <span>●</span> <span>第一层级</span> </div> <h2 class="layer-title">争冠组</h2> <p class="layer-description"> 顶级竞技状态下的精细化调整，聚焦于巅峰对决中的细节打磨与状态维持，追求在最高强度竞争中保持稳定性与突破性。 </p> </div> <div class="layer-content"> <div class="focus-card"> <div class="focus-number">FOCUS 01</div> <h3 class="focus-title">冠军气质与关键球处理</h3> <p class="focus-details"> 针对比赛最后五分钟、决胜局或关键分的专项训练，模拟高压环境下的决策质量与执行稳定性。 </p> <div class="focus-metrics"> <span class="metric">决胜局胜率</span> <span class="metric">关键分转化率</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 02</div> <h3 class="focus-title">战术微调与对手针对性破解</h3> <p class="focus-details"> 针对主要竞争对手的战术特点进行预案设计，在循环中不断测试与优化反制策略的有效性。 </p> <div class="focus-metrics"> <span class="metric">战术变化成功率</span> <span class="metric">对手适应时间</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 03</div> <h3 class="focus-title">巅峰状态维持与负荷管理</h3> <p class="focus-details"> 在漫长赛季中科学安排状态高峰期，平衡训练强度与恢复，避免核心球员过度疲劳或状态下滑。 </p> <div class="focus-metrics"> <span class="metric">状态波动曲线</span> <span class="metric">疲劳指数</span> </div> </div> </div> </section> <!-- 欧战/季后赛组 --> <section class="layer-section layer-euro"> <div class="layer-header"> <div class="layer-tag"> <span>●</span> <span>第二层级</span> </div> <h2 class="layer-title">欧战/季后赛组</h2> <p class="layer-description"> 多线作战能力的构建与阵容深度的挖掘，平衡联赛与杯赛/季后赛的双重要求，提升在关键战役中的竞争力。 </p> </div> <div class="layer-content"> <div class="focus-card"> <div class="focus-number">FOCUS 01</div> <h3 class="focus-title">阵容轮换与多线作战策略</h3> <p class="focus-details"> 建立科学的轮换机制，确保主力球员在关键比赛中保持最佳状态，同时给予替补球员足够的实战锻炼。 </p> <div class="focus-metrics"> <span class="metric">轮换阵容胜率</span> <span class="metric">主力球员负荷</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 02</div> <h3 class="focus-title">季后赛/杯赛针对性准备</h3> <p class="focus-details"> 针对淘汰赛制的特点进行专项训练，包括系列赛策略、主场优势利用以及客场作战的心理调整。 </p> <div class="focus-metrics"> <span class="metric">系列赛调整能力</span> <span class="metric">客场胜率</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 03</div> <h3 class="focus-title">年轻球员培养与即战力挖掘</h3> <p class="focus-details"> 在成绩压力下寻找年轻球员的成长空间，通过CTD循环加速其经验积累与技术成熟。 </p> <div class="focus-metrics"> <span class="metric">年轻球员贡献值</span> <span class="metric">成长曲线斜率</span> </div> </div> </div> </section> <!-- 保级/乐透组 --> <section class="layer-section layer-survival"> <div class="layer-header"> <div class="layer-tag"> <span>●</span> <span>第三层级</span> </div> <h2 class="layer-title">保级/乐透组</h2> <p class="layer-description"> 生存压力下的务实策略与士气重建，聚焦于基础战术的稳定性与关键比赛的胜负手把握，为未来发展奠定基础。 </p> </div> <div class="layer-content"> <div class="focus-card"> <div class="focus-number">FOCUS 01</div> <h3 class="focus-title">防守体系稳固与失误控制</h3> <p class="focus-details"> 建立简单有效的防守体系，最大限度减少非受迫性失误，在实力相近的比赛中通过稳定性取胜。 </p> <div class="focus-metrics"> <span class="metric">场均失误控制</span> <span class="metric">防守效率值</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 02</div> <h3 class="focus-title">士气管理与团队凝聚力</h3> <p class="focus-details"> 在连败或低谷期维持团队信心，通过小型胜利重建赢球文化，强化更衣室的正向氛围。 </p> <div class="focus-metrics"> <span class="metric">逆境反弹能力</span> <span class="metric">团队化学指数</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 03</div> <h3 class="focus-title">核心球员依赖与角色球员激活</h3> <p class="focus-details"> 避免过度依赖个别球星，通过CTD训练提升角色球员的自信心与执行力，分散进攻/防守压力。 </p> <div class="focus-metrics"> <span class="metric">得分分布均衡度</span> <span class="metric">替补贡献值</span> </div> </div> </div> </section> <!-- 新军组 --> <section class="layer-section layer-rookie"> <div class="layer-header"> <div class="layer-tag"> <span>●</span> <span>第四层级</span> </div> <h2 class="layer-title">新军组</h2> <p class="layer-description"> 从零到一的体系建设与文化塑造，专注于基础技术打磨、战术理解深化以及团队身份的建立，为长期发展打下根基。 </p> </div> <div class="layer-content"> <div class="focus-card"> <div class="focus-number">FOCUS 01</div> <h3 class="focus-title">基础技术标准化与自动化</h3> <p class="focus-details"> 通过大量重复训练将基础技术动作转化为肌肉记忆，建立全队统一的技术标准与执行规范。 </p> <div class="focus-metrics"> <span class="metric">基础动作成功率</span> <span class="metric">技术一致性</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 02</div> <h3 class="focus-title">战术体系启蒙与比赛阅读</h3> <p class="focus-details"> 建立简单清晰的战术框架，培养球员的比赛阅读能力与临场决策速度，从“执行指令”到“理解意图”。 </p> <div class="focus-metrics"> <span class="metric">战术理解度</span> <span class="metric">临场决策质量</span> </div> </div> <div class="focus-card"> <div class="focus-number">FOCUS 03</div> <h3 class="focus-title">团队文化奠基与身份认同</h3> <p class="focus-details"> 建立独特的团队文化与价值观，通过CTD循环中的共同经历强化团队认同感与归属感。 </p> <div class="focus-metrics"> <span class="metric">文化认同指数</span> <span class="metric">团队凝聚力</span> </div> </div> </div> </section> </div> <section class="summary-section"> <h2 class="summary-title">CTD循环分层训练核心指标</h2> <p style="text-align: center; color: var(--text-secondary); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;"> 不同层级在CTD循环中关注的差异化指标，体现各阶段的训练重点与评估标准。 </p> <div class="summary-grid"> <div class="summary-item"> <span class="summary-icon">🏆</span> <div class="summary-label">争冠组核心</div> <div class="summary-value">细节决定成败</div> </div> <div class="summary-item"> <span class="summary-icon">⚔️</span> <div class="summary-label">欧战组核心</div> <div class="summary-value">深度决定广度</div> </div> <div class="summary-item"> <span class="summary-icon">🛡️</span> <div class="summary-label">保级组核心</div> <div class="summary-value">稳定决定生存</div> </div> <div class="summary-item"> <span class="summary-icon">🌱</span> <div class="summary-label">新军组核心</div> <div class="summary-value">基础决定未来</div> </div> </div> </section> <footer> <p>CTD循环训练体系 · 核心看点分层解析 · 为每个发展阶段提供定制化训练视角</p> <p style="margin-top: 0.5rem; font-size: 0.8rem;">版本 2.1 · 更新于 2026年5月</p> </footer> </div> <script> // 滚动进度指示器 window.addEventListener('scroll', function() { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercent = (scrollTop / docHeight) * 100; document.getElementById('scrollIndicator').style.width = scrollPercent + '%'; }); // 导航标签交互 const navPills = document.querySelectorAll('.nav-pill'); navPills.forEach(pill => { pill.addEventListener('click', function() { navPills.forEach(p => p.classList.remove('active')); this.classList.add('active'); // 这里可以添加筛选逻辑，根据选择的层级显示/隐藏对应部分 const selectedLayer = this.textContent; console.log('选择的层级:', selectedLayer); }); }); // 卡片悬停效果增强 const focusCards = document.querySelectorAll('.focus-card'); focusCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-6px)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); }); // 滚动时的视差效果 window.addEventListener('scroll', function() { const scrolled = window.scrollY; const layers = document.querySelectorAll('.layer-section'); layers.forEach((layer, index) => { const speed = 0.05 * (index + 1); const yPos = -(scrolled * speed); layer.style.transform = `translateY(${yPos}px)`; }); }); // 初始化动画 document.addEventListener('DOMContentLoaded', function() { // 添加交错动画延迟 const sections = document.querySelectorAll('.layer-section'); sections.forEach((section, index) => { section.style.animationDelay = `${0.3 + index * 0.2}s`; }); }); </script> </body> </html> 这个设计实现了以下特点： 1. 分层视觉系统：为四个层级（争冠组→欧战组→保级组→新军组）分别设计了独特的色彩标识和视觉风格 2. 清晰的层次结构：每个层级都有独立的小标题区域和核心看点卡片 3. ：每个层级的训练重点都与其竞技状态和发展阶段相匹配 4. 交互设计：导航标签、悬停效果和滚动动画增强了用户体验 5. 响应式布局：适配从桌面到移动设备的各种屏幕尺寸 6. 数据可视化：每个焦点卡片都包含关键指标标签，直观展示训练重点 整体设计采用了深色主题配合层级色彩编码，既保持了专业感又通过视觉区分强化了信息层次。
