66 lines
6.1 KiB
HTML
66 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#eee8dc" />
|
|
<meta name="description" content="三国六场关键战役与政变的独立图文故事集，供 Digital Me 后续统一接入。" />
|
|
<title>三国故事集｜六卷历史画卷</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#stories">跳到故事列表</a>
|
|
<div class="calligraphy" aria-hidden="true">
|
|
<span>永和九年岁在癸丑暮春之初</span><span>会于会稽山阴之兰亭修禊事也</span><span>群贤毕至少长咸集此地有崇山峻岭</span><span>茂林修竹又有清流激湍映带左右</span><span>仰观宇宙之大俯察品类之盛</span><span>所以游目骋怀足以极视听之娱</span><span>夫人之相与俯仰一世或取诸怀抱</span><span>虽无丝竹管弦之盛一觞一咏</span><span>足以畅叙幽情信可乐也</span>
|
|
</div>
|
|
<header class="hero">
|
|
<p>THREE KINGDOMS · ILLUSTRATED CHRONICLE</p>
|
|
<h1><span>三国</span>故事集</h1>
|
|
<div><b>六卷历史画卷</b><span>战役与政变 · 独立成篇 · 可直接接入</span></div>
|
|
<a href="#stories">向下翻阅</a>
|
|
</header>
|
|
<main id="stories">
|
|
<header class="section-title"><p>STORY COLLECTION</p><h2>乱世的六个切面</h2><span>每一卷均为独立静态页面，不依赖转场素材。</span></header>
|
|
<div class="story-grid">
|
|
<article class="story-card">
|
|
<a href="./stories/jieting-battle/index.html" aria-label="阅读街亭之战·诸葛亮第一次北伐">
|
|
<figure><img src="./stories/jieting-battle/assets/images/01-three-commandaries-rise.webp" alt="街亭之战·诸葛亮第一次北伐卷首画面" loading="eager" /><span>01</span></figure>
|
|
<div><p>三国·蜀汉建兴六年／曹魏太和二年</p><h3>街亭之战·诸葛亮第一次北伐</h3><span>228年春 · 5幕</span><small>马谡舍水上山，张郃绝其汲道而大破蜀军；街亭失守使诸葛亮第一次北伐失去前进支点，最终退回汉中。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
<article class="story-card">
|
|
<a href="./stories/wuzhang-plains/index.html" aria-label="阅读五丈原之战（诸葛亮卒于军）">
|
|
<figure><img src="./stories/wuzhang-plains/assets/images/01-cross-xie-valley.webp" alt="五丈原之战（诸葛亮卒于军）卷首画面" loading="eager" /><span>02</span></figure>
|
|
<div><p>三国·蜀汉建兴十二年／曹魏青龙二年</p><h3>五丈原之战（诸葛亮卒于军）</h3><span>234年春至八月 · 5幕</span><small>诸葛亮据五丈原屯田久驻，司马懿奉诏坚壁拒守；两军相持百余日后诸葛亮病卒军中，蜀军整阵退还。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
<article class="story-card">
|
|
<a href="./stories/gaopingling-coup/index.html" aria-label="阅读高平陵之变">
|
|
<figure><img src="./stories/gaopingling-coup/assets/images/01-imperial-procession-gaoping.webp" alt="高平陵之变卷首画面" loading="lazy" /><span>03</span></figure>
|
|
<div><p>三国·曹魏正始十年（同年四月改元嘉平）</p><h3>高平陵之变</h3><span>正始十年正月甲午（249年2月5日）至正月戊戌（249年2月9日） · 5幕</span><small>司马懿趁魏帝曹芳与曹爽兄弟出城谒陵控制洛阳，迫使曹爽交权，随后诛灭曹爽集团，曹魏实权由此转入司马氏之手。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
<article class="story-card">
|
|
<a href="./stories/cao-mao-death/index.html" aria-label="阅读高贵乡公曹髦之死">
|
|
<figure><img src="./stories/cao-mao-death/assets/images/01-a-throne-without-power.webp" alt="高贵乡公曹髦之死卷首画面" loading="lazy" /><span>04</span></figure>
|
|
<div><p>三国·曹魏甘露五年（后改元景元）</p><h3>高贵乡公曹髦之死</h3><span>260年五月己丑 · 5幕</span><small>二十岁的魏帝曹髦不愿坐受废辱，率少数宿卫出宫讨司马昭，行至南阙被贾充所部阻截，太子舍人成济持戈行刺；曹髦死后，司马昭仍掌朝政。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
<article class="story-card">
|
|
<a href="./stories/wei-conquest-shu/index.html" aria-label="阅读魏灭蜀之战（邓艾钟会伐蜀·刘禅出降）">
|
|
<figure><img src="./stories/wei-conquest-shu/assets/images/01-三路入汉中.webp" alt="魏灭蜀之战（邓艾钟会伐蜀·刘禅出降）卷首画面" loading="lazy" /><span>05</span></figure>
|
|
<div><p>三国·曹魏景元四年／蜀汉炎兴元年</p><h3>魏灭蜀之战（邓艾钟会伐蜀·刘禅出降）</h3><span>263年秋至冬 · 5幕</span><small>钟会主力进入汉中却受阻剑阁，邓艾由阴平险道迂回江油、击破绵竹；刘禅在成都出降，蜀汉灭亡。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
<article class="story-card">
|
|
<a href="./stories/zhong-hui-rebellion/index.html" aria-label="阅读钟会之乱（邓艾、钟会之死）">
|
|
<figure><img src="./stories/zhong-hui-rebellion/assets/images/01-arrest-deng-ai.webp" alt="钟会之乱（邓艾、钟会之死）卷首画面" loading="lazy" /><span>06</span></figure>
|
|
<div><p>三国·曹魏景元五年（264年；同年五月改元咸熙）</p><h3>钟会之乱（邓艾、钟会之死）</h3><span>264年正月；钟会正月十五日至成都、十六日起兵、十八日兵败身死，邓艾随后遇害 · 5幕</span><small>灭蜀后，钟会先促成邓艾被捕，继而在成都起兵失败；钟会与姜维死于兵变，刚被旧部救出的邓艾也与子邓忠在绵竹西被杀。</small><b>进入画卷 →</b></div>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
<footer><span>Digital Me · 三国故事集</span><a href="./manifest.json">接入清单</a></footer>
|
|
</body>
|
|
</html>
|