德国：1936年柏林奥运会彩色影像，希特勒亲临现场！
下面我将为你创建一个关于1936年柏林奥运会的精美网页文章,采用Art Deco风格呼应1930年代的时代氛围，3大核心板块按赛事类型划分。 html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1936年柏林奥运会</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Noto+Serif+SC:wght@300;400;600;700&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"> <style> :root { --bg: #0c0a07; --surface: #1a1610; --surface-raised: #241f16; --accent: #c9a84c; --accent-dim: #8b7535; --accent-glow: #e8c65a; --text-primary: #ede6d6; --text-muted: #8a806e; --border: #3a3326; --red-accent: #8b2e2e; --red-glow: #b33a3a; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-primary); font-family: 'Noto Serif SC', serif; font-weight: 300; line-height: 1.9; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 9999; } /* === HERO === */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(201, 168, 76, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(139, 46, 46, 0.06) 0%, transparent 50%), linear-gradient(180deg, rgba(0,0,0,0) 60%, var(--bg) 100%); z-index: 1; } /* Art Deco border frame */ .hero-frame { position: absolute; inset: 2rem; border: 1px solid var(--accent-dim); opacity: 0.3; z-index: 1; } .hero-frame::before, .hero-frame::after { content: ''; position: absolute; background: var(--accent-dim); } .hero-frame::before { top: -1px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; } .hero-frame::after { bottom: -1px; left: 50%; transform: translateX(-50%); width: 120px; height: 3px; } .hero-content { position: relative; z-index: 2; } .hero-year { font-family: 'DM Mono', monospace; font-size: 0.85rem; letter-spacing: 0.6em; color: var(--accent); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s ease 0.2s forwards; } .hero-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.15; color: var(--text-primary); margin-bottom: 0.3rem; opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards; } .hero-title span { display: block; font-size: 0.45em; font-weight: 400; letter-spacing: 0.3em; color: var(--accent); margin-top: 0.5rem; } .hero-deco { width: 60px; height: 1px; background: var(--accent); margin: 2rem auto; position: relative; opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards; } .hero-deco::before, .hero-deco::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); } .hero-deco::before { left: -10px; } .hero-deco::after { right: -10px; } .hero-subtitle { font-size: 1rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; opacity: 0; animation: fadeUp 0.8s ease 0.8s forwards; } .hero-scroll { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; animation: fadeUp 0.8s ease 1s forwards; } .hero-scroll span { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.3em; color: var(--text-muted); text-transform: uppercase; } .hero-scroll .line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2s ease infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.4; transform: scaleY(0.6); } } /* === OVERVIEW BAR === */ .overview-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-width: 1100px; margin: 0 auto; } .overview-item { padding: 2.5rem 1.5rem; text-align: center; border-right: 1px solid var(--border); } .overview-item:last-child { border-right: none; } .overview-number { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.5rem; } .overview-label { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-muted); text-transform: uppercase; } /* === INTRO SECTION === */ .intro { max-width: 800px; margin: 5rem auto; padding: 0 2rem; } .intro-text { font-size: 1.15rem; color: var(--text-muted); text-align: justify; position: relative; padding-left: 2rem; border-left: 2px solid var(--accent-dim); } .intro-text::first-letter { font-family: 'Playfair Display', serif; font-size: 3.5rem; float: left; line-height: 1; margin-right: 0.5rem; margin-top: 0.1rem; color: var(--accent); } /* === CONTENT SECTIONS === */ .content-wrapper { max-width: 1000px; margin: 0 auto; padding: 0 2rem 6rem; } .section { margin-bottom: 6rem; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .section.visible { opacity: 1; transform: translateY(0); } .section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); position: relative; } .section-number { font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 900; color: var(--accent); opacity: 0.15; line-height: 1; position: absolute; right: 0; top: -0.5rem; } .section-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent-dim); transform: rotate(45deg); flex-shrink: 0; } .section-icon span { transform: rotate(-45deg); font-size: 1.2rem; } h2 { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 1.8rem; color: var(--text-primary); line-height: 1.4; } h2 small { display: block; font-family: 'DM Mono', monospace; font-weight: 300; font-size: 0.65rem; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-top: 0.4rem; } .section-body p { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; text-align: justify; } .section-body p strong { color: var(--text-primary); font-weight: 600; } /* Highlight card */ .highlight-card { background: var(--surface); border: 1px solid var(--border); padding: 2rem; margin: 2rem 0; position: relative; overflow: hidden; } .highlight-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--accent), var(--accent-dim)); } .highlight-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle at 100% 0%, rgba(201,168,76,0.06) 0%, transparent 70%); } .highlight-card .card-label { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; margin-bottom: 0.8rem; } .highlight-card h3 { font-family: 'Noto Serif SC', serif; font-weight: 600; font-size: 1.2rem; color: var(--text-primary); margin-bottom: 0.8rem; } .highlight-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0 !important; } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); margin: 2.5rem 0; border: 1px solid var(--border); } .stat-cell { background: var(--surface); padding: 1.8rem; text-align: center; } .stat-cell .stat-value { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--accent); margin-bottom: 0.3rem; } .stat-cell .stat-desc { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: var(--text-muted); text-transform: uppercase; } /* Event list */ .event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 2rem 0; } .event-cell { background: var(--surface); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; transition: background 0.3s ease; } .event-cell:hover { background: var(--surface-raised); } .event-cell .event-rank { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--accent); opacity: 0.3; flex-shrink: 0; width: 30px; } .event-cell .event-info h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.3rem; } .event-cell .event-info p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0 !important; line-height: 1.7; } /* Pullquote */ .pullquote { position: relative; margin: 3rem 0; padding: 2rem 2.5rem; font-family: 'Noto Serif SC', serif; font-weight: 400; font-size: 1.2rem; color: var(--text-primary); font-style: italic; line-height: 1.8; border-top: 1px solid var(--accent-dim); border-bottom: 1px solid var(--accent-dim); text-align: center; } .pullquote cite { display: block; font-family: 'DM Mono', monospace; font-size: 0.7rem; font-style: normal; letter-spacing: 0.15em; color: var(--accent-dim); margin-top: 1rem; text-transform: uppercase; } /* === FOOTER === */ .footer { text-align: center; padding: 4rem 2rem; border-top: 1px solid var(--border); position: relative; } .footer::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: var(--accent); } .footer-deco { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; } .footer-deco .fl { width: 40px; height: 1px; background: var(--accent-dim); } .footer-deco .diamond { width: 8px; height: 8px; border: 1px solid var(--accent); transform: rotate(45deg); } .footer p { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-muted); text-transform: uppercase; } /* === ANIMATIONS === */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* === RESPONSIVE === */ @media (max-width: 768px) { .overview-bar { grid-template-columns: repeat(2, 1fr); } .overview-item:nth-child(2) { border-right: none; } .overview-item:nth-child(1), .overview-item:nth-child(2) { border-bottom: 1px solid var(--border); } .overview-item:nth-child(3), .overview-item:nth-child(4) { border-top: none; } .event-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr; } .hero-frame { inset: 1rem; } .section-number { font-size: 2.5rem; } } </style> </head> <body> <!-- HERO --> <section class="hero"> <div class="hero-frame"></div> <div class="hero-content"> <div class="hero-year">BERLIN · 1936</div> <h1 class="hero-title"> 柏林奥运会 <span>第十一届奥林匹克运动会</span> </h1> <div class="hero-deco"></div> <p class="hero-subtitle"> 1936年8月1日至16日，纳粹德国柏林举办了第十一届夏季奥林匹克运动会，这是一场体育与政治深度交织的盛会，也是一段无法被时间遗忘的历史。 </p> </div> <div class="hero-scroll"> <span>向下探索</span> <div class="line"></div> </div> </section> <!-- OVERVIEW BAR --> <div class="overview-bar"> <div class="overview-item"> <div class="overview-number">49</div> <div class="overview-label">参赛国家</div> </div> <div class="overview-item"> <div class="overview-number">3,963</div> <div class="overview-label">参赛运动员</div> </div> <div class="overview-item"> <div class="overview-number">129</div> <div class="overview-label">小项金牌</div> </div> <div class="overview-item"> <div class="overview-number">16</div> <div class="overview-label">比赛天数</div> </div> </div> <!-- INTRO --> <div class="intro"> <div class="intro-text"> 1936年的柏林，奥林匹克五环旗帜在帝国体育场的旗杆上高高飘扬，德国以举国之力筹办了这场空前盛大的运动会，从开幕式的恢弘编排到赛事场馆的精心设计，无不展现出一个国家机器驱动下的组织能力，光环之下暗流涌动——这届奥运会注定要成为体育史上最复杂、最具争议的篇章之一，赛场上的竞技传奇与赛场外的政治阴影交织，使柏林奥运会成为一面映射时代的镜子。 </div> </div> <!-- MAIN CONTENT --> <div class="content-wrapper"> <!-- SECTION 1: 田径与水上运动 --> <section class="section" id="s1"> <div class="section-header"> <div class="section-icon"><span>🏃</span></div> <h2> 田径与水上运动 <small>Athletics & Aquatics</small> </h2> <div class="section-number">01</div> </div> <div class="section-body"> <p> 田径和水上运动是柏林奥运会最核心的竞技舞台，也是这届赛事中最具戏剧性和传奇色彩的领域，径赛场上，来自各国的顶尖选手展开了激烈角逐，诞生了多项突破性的纪录，作为奥运会的传统主项，田径赛事吸引了最多的关注和观众。 </p> <div class="highlight-card"> <div class="card-label">传奇时刻</div> <h3>杰西·欧文斯——"四金王"的回响</h3> <p> 非裔美国运动员<strong>杰西·欧文斯（Jesse Owens）</strong>在柏林赛场上横扫四枚金牌——100米、200米、跳远和4×100米接力，成为这届奥运会最耀眼的明星，在纳粹鼓吹"雅利安人种优越论"的政治背景下，欧文斯以无可辩驳的实力书写了体育史上最伟大的个人表现之一，他与德国跳远选手卢茨·朗之间的体育友谊，更成为跨越种族与国界的动人佳话。 </p> </div> <div class="stats-row"> <div class="stat-cell"> <div class="stat-value">10.3s</div> <div class="stat-desc">100米金牌成绩</div> </div> <div class="stat-cell"> <div class="stat-value">8.06m</div> <div class="stat-desc">跳远金牌成绩</div> </div> <div class="stat-cell"> <div class="stat-value">4枚</div> <div class="stat-desc">欧文斯个人金牌</div> </div> </div> <p> 水上运动同样精彩纷呈，游泳比赛见证了荷兰、日本等国选手的出色表现，日本队在游泳项目上展现了强大的实力，尤其是在男子项目中多次摘金，跳水赛场则由美国队继续保持统治地位，水球比赛的激烈程度同样引人注目，决赛中的对抗被形容为"水中的战争"。 </p> <div class="event-grid"> <div class="event-cell"> <div class="event-rank">01</div> <div class="event-info"> <h4>男子100米</h4> <p>杰西·欧文斯以10.3秒夺金，平世界纪录，成为"世界上跑得最快的人"。</p> </div> </div> <div class="event-cell"> <div class="event-rank">02</div> <div class="event-info"> <h4>男子跳远</h4> <p>欧文斯与卢茨·朗上演经典对决，最终以8.06米夺金，友谊传为美谈。</p> </div> </div> <div class="event-cell"> <div class="event-rank">03</div> <div class="event-info"> <h4>男子1500米</h4> <p>新西兰的杰克·洛夫洛克以3分47.8秒创奥运纪录，一骑绝尘。</p> </div> </div> <div class="event-cell"> <div class="event-rank">04</div> <div class="event-info"> <h4>男子100米自由泳</h4> <p>匈牙利奇克·费伦茨夺冠，展现了欧洲在中短距离游泳中的实力。</p> </div> </div> </div> <p> 田径赛场上另一大亮点是印度在曲棍球项目中的统治级表现，作为当时英属印度的代表队，他们以绝对优势连续第四次获得奥运金牌，整个赛事中仅失一球，这些发生在竞技场上的故事，证明了体育超越政治的力量。 </p> <div class="pullquote"> "在赛场上，没有肤色之分，只有速度与力量的较量。" <cite>—— 后世对柏林奥运会田径赛事的评价</cite> </div> </div> </section> <!-- SECTION 2: 球类与团体竞技 --> <section class="section" id="s2"> <div class="section-header"> <div class="section-icon"><span>⚽</span></div> <h2> 球类与团体竞技 <small>Ball Sports & Team Events</small> </h2> <div class="section-number">02</div> </div> <div class="section-body"> <p> 球类与团体竞技项目在柏林奥运会上占据重要地位，从足球、篮球到手球，从拳击到击剑，这些项目既展现了个人技艺，也体现了团队精神与战术智慧，这届奥运会的球类赛事，也为多项运动此后的国际化发展奠定了里程碑式的一步。 </p> <div class="highlight-card"> <div class="card-label">里程碑</div> <h3>足球——意大利的卫冕之路</h3> <p> 足球赛场上，由维托里奥·波佐执教的<strong>意大利队</strong>延续了1934年世界杯夺冠的势头，在柏林奥运会上成功摘金，这支蓝衣军团在比赛中展现了当时欧洲最先进的战术理念——以坚固防守为基础的快速反击体系，半决赛中，意大利以2比1力克挪威；决赛面对奥地利，最终以2比1取胜，赢得金牌，足球赛事在柏林共吸引了数十万观众入场观看。 </p> </div> <div class="stats-row"> <div class="stat-cell"> <div class="stat-value">16支</div> <div class="stat-desc">足球参赛队</div> </div> <div class="stat-cell"> <div class="stat-value">🇮🇹</div> <div class="stat-desc">足球金牌得主</div> </div> <div class="stat-cell"> <div class="stat-value">首次</div> <div class="stat-desc">篮球成为奥运项目</div> </div> </div> <p> <strong>篮球</strong>在这届奥运会上首次被列为正式比赛项目，成为篮球发展史上的重大事件，决赛在美国队与加拿大队之间展开，最终美国队以19比8获胜——这一比分在今天看来难以想象，反映了当时篮球运动尚处于发展初期的状态，比赛在室外网球场举行，场地条件简陋，但这一开端将篮球推向了全球化的舞台。 </p> <div class="event-grid"> <div class="event-cell"> <div class="event-rank">01</div> <div class="event-info"> <h4>足球决赛</h4> <p>意大利2比1击败奥地利，卫冕奥运足球金牌，波佐的战术体系大放异彩。</p> </div> </div> <div class="event-cell"> <div class="event-rank">02</div> <div class="event-info"> <h4>篮球决赛</h4> <p>首届奥运篮球决赛，美国19比8战胜加拿大，开启篮球奥运史。</p> </div> </div> <div class="event-cell"> <div class="event-rank">03</div> <div class="event-info"> <h4>手球（草地手球）</h4> <p>草地手球首次也是唯一一次亮相奥运，德国队在主场夺冠。</p> </div> </div> <div class="event-cell"> <div class="event-rank">04</div> <div class="event-info"> <h4>水球决赛</h4> <p>匈牙利队击败德国队夺金，水球赛事因激烈的身体对抗备受关注。</p> </div> </div> </div> <p> <strong>拳击</strong>赛场上涌现了多位后来在职业拳坛声名赫赫的选手。<strong>马球</strong>作为当时的精英运动也出现在奥运赛程中，阿根廷队凭借精湛的骑术和球技夺冠，这些团体和对抗性项目的竞技，为柏林奥运会增添了丰富的观赏层次。 </p> <div class="pullquote"> 1936年柏林奥运会是篮球、手球等项目走上奥运舞台的关键节点，从此改变了这些运动的命运轨迹。 <cite>—— 体育史学者评述</cite> </div> </div> </section> <!-- SECTION 3: 体操、力量型项目与中国参赛 --> <section class="section" id="s3"> <div class="section-header"> <div class="section-icon"><span>🤸</span></div> <h2> 体操、力量项目与中国参赛 <small>Gymnastics, Strength Events & China's Debut</small> </h2> <div class="section-number">03</div> </div> <div class="section-body"> <p> 体操、举重、摔跤等力量与技巧型项目是柏林奥运会的第三大竞技板块，这些项目不仅考验运动员的身体极限，更展现了力量与美学的完美结合，而在这些赛场之外，一个对中国体育意义深远的故事正在发生——中国首次正式派出代表团参加奥运会。 </p> <div class="highlight-card"> <div class="card-label">中国记忆</div> <h3>刘长春——中国奥运第一人</h3> <p> 1932年洛杉矶奥运会上，短跑运动员<strong>刘长春</strong>作为中国唯一的参赛代表，漂洋过海参加了100米和200米比赛，成为第一位站上奥运赛场的中国运动员，到了1936年柏林奥运会，中国派出了由<strong>69名运动员</strong>组成的代表团，参加了田径、游泳、篮球、足球、拳击、自行车等多个项目的角逐，这是中国历史上首次以完整阵容参加奥运会，尽管成绩并不突出，但代表团在赛场上展现的精神面貌赢得了尊重。 </p> </div> <div class="stats-row"> <div class="stat-cell"> <div class="stat-value">69人</div> <div class="stat-desc">中国代表团运动员</div> </div> <div class="stat-cell"> <div class="stat-value">多项</div> <div class="stat-desc">参赛项目数量</div> </div> <div class="stat-cell"> <div class="stat-value">1936</div> <div class="stat-desc">中国首次组团参赛</div> </div> </div> <p> <strong>体操</strong>赛场上，德国和瑞士队展现出强大的统治力，男子全能比赛中，德国选手凭借主场优势和近乎完美的动作征服了裁判和观众，体操比赛在柏林奥林匹克体操馆中进行，场馆内座无虚席，德国观众的热情助威成为了运动员发挥超常的动力，女子体操虽尚未设个人全能，但团体赛的精彩表演已经预示了这一项目未来的发展方向。 </p> <p> <strong>举重</strong>和<strong>摔跤</strong>是力量型项目中的焦点，举重比赛分为五个级别，埃及选手在轻量级中表现抢眼，而德国和奥地利选手则在中量级和重量级中占据主导地位，古典式摔跤和自由式摔跤的比赛同样精彩，瑞典、芬兰、土耳其和匈牙利等传统摔跤强国展开了激烈争夺，这些力量型项目的竞技，展现了人类对身体极限的不懈追求。 </p> <div class="event-grid"> <div class="event-cell"> <div class="event-rank">01</div> <div class="event-info"> <h4>体操男子全能</h4> <p>德国选手包揽前三，主场观众的欢呼声响彻整个奥林匹克体操馆。</p> </div> </div> <div class="event-cell"> <div class="event-rank">02</div> <div class="event-info"> <h4>举重各级别</h4> <p>五个级别比赛精彩纷呈，埃及与欧洲选手在轻量级和重量级各有斩获。</p> </div> </div> <div class="event-cell"> <div class="event-rank">03</div> <div class="event-info"> <h4>中国代表团</h4> <p>69名运动员出征柏林，虽未获奖牌，但开启了中国奥运征程的新篇章。</p> </div> </div> <div class="event-cell"> <div class="event-rank">04</div> <div class="event-info"> <h4>马术三项赛</h4> <p>德国队在马术项目中展现了绝对统治力，几乎包揽全部金牌。</p> </div> </div> </div> <p> 值得一提的是，中国代表团的这趟柏林之行充满艰辛，经费不足、路途遥远、旅途辗转，代表团乘船历时近一个月才抵达柏林，尽管竞技成绩有限，但这段经历深深激励了中国体育界，代表团回国后，体育救国的理念进一步深入人心，从1932年刘长春独自一人踏上奥运赛场，到1936年整团出征，中国体育在短短四年间迈出了历史性的一步。 </p> <div class="pullquote"> "我们虽然没有拿到奖牌，但我们把中国的旗帜带到了奥运赛场，这就是最大的胜利。" <cite>—— 1936年中国代表团成员回忆</cite> </div> </div> </section> </div> <!-- FOOTER --> <footer class="footer"> <div class="footer-deco"> <div class="fl"></div> <div class="diamond"></div> <div class="fl"></div> </div> <p>1936 · Berlin · 第十一届奥林匹克运动会</p> </footer> <script> // Intersection Observer for scroll animations const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 }); document.querySelectorAll('.section').forEach(el => observer.observe(el)); </script> </body> </html> --- 关于文章结构的说明： 这篇文章围绕1936年柏林奥运会，按赛事类型划分为3大核心板块： 1. 田径与水上运动 — 涵盖欧文斯四金传奇、游泳、跳水等基础大项 2. 球类与团体竞技 — 包括足球（意大利夺冠）、篮球首次入奥、手球、水球等 3. 体操、力量项目与中国参赛 — 涵盖体操、举重、摔跤，以及中国首次组团参加奥运的历史 页面采用Art Deco风格设计，呼应1930年代的时代质感，包含数据卡片、赛事实录网格、引语等排版元素，以及滚动渐入动画。
