CSS-only Showcase · MediaWiki TemplateStyles

Test Portal

     这是一个“功能性主页 / 门户页”演示：只用 Wikitext + TemplateStyles，尝试各种有趣但可控的样式与伪交互。

8

种 CSS-only 玩法

0

行 JS

1

层容器（克制）

     <a class="tst-navlink" href="#notice">翻牌公告</a>
     <a class="tst-navlink" href="#tabs">Tabs 切换</a>
     <a class="tst-navlink" href="#faq">折叠/FAQ</a>
     <a class="tst-navlink" href="#timeline">时间线</a>

     提示：移动端没有 hover，“翻牌”会退化为正面展示；核心信息不要只放在背面。

示例图：可替换为 Eden/Laputa/车站/机械建筑截图

翻牌公告墙

hover 翻转 · 卡片轻光泽 · 适合公告/彩蛋

公告

Eden 主城更新

车站新增换乘节点与指示牌

悬停查看详情

Eden 主城更新

           主城东侧新增铁路换乘节点；邮局与仓储完成迁移。

           建议更新你的路标与站台指引。

👉 查看详情

活动

Laputa 工业线开通

新线路已接入货运站台

悬停查看详情

Laputa 工业线开通

           新增工业区—主城货运联络线；请注意站台标识与装卸规范。

           如需申请站点接入：常见申请。

👉 去申请

提示

邮局 NPC 上新

明信片 / 包裹 / 货运说明

悬停查看详情

邮局 NPC 上新

           明信片、包裹、货运规则已更新。

           新人建议先读：手册与使用说明。

👉 打开手册

彩蛋

这张卡片是…

“纯 CSS 伪交互”的上限演示

悬停翻面

没有 JS，也能挺好玩

           但不要把关键信息只放在 hover/背面，移动端不友好。

           最佳用法：作为点缀、强调、引导。

👉 排版帮助

CSS-only Tabs

radio 互斥切换 · 适合 Eden/Laputa/规则/指南

   <input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-1" checked="checked" />
   <input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-2" />
   <input class="tst-tab-radio" type="radio" name="tsttab" id="tsttab-3" />

     <label class="tst-tab" for="tsttab-1">Eden</label>
     <label class="tst-tab" for="tsttab-2">Laputa</label>
     <label class="tst-tab" for="tsttab-3">FAQ</label>

Eden · 主要世界

         内容与活动更丰富，适合定居与叙事建设。

         机械最高转速：128

         主城
         铁路枢纽
         邮政服务
         聚落共鸣

👉 了解 Eden

Laputa · 工业世界

         更偏工业与生产，继承旧存档更自由。

         机械最高转速：256

         工业区
         货运线
         仓储
         装卸规范

👉 了解 Laputa

FAQ · 常见问题

         这里用 Tabs 放“短答”，长内容请沉淀到条目页。

         例如：背包互通？设施怎么用？共鸣怎么申请？

👉 去手册页

折叠/手风琴（CSS-only）

checkbox 展开收起 · 适合规则说明/新手必读

     <input class="tst-acc-check" type="checkbox" id="acc-1" />
     <label class="tst-acc-head" for="acc-1">
       背包互通吗？
       +
     </label>

         短答： Eden 与 Laputa 背包互通（细节以条目说明为准）。

         为什么要这样写？

       建议把细节拆到条目页，并在此处给出“最短路径链接”。例如：新手指南。

     <input class="tst-acc-check" type="checkbox" id="acc-2" />
     <label class="tst-acc-head" for="acc-2">
       公共设施怎么用？
       +
     </label>

         建议： 门户页只放入口与最短规范，详情放在设施条目。

         入口：功能和设施 · 手册大全

       设施使用规范最好用“要点清单 + 违规示例”的结构写，阅读效率最高。

     <input class="tst-acc-check" type="checkbox" id="acc-3" />
     <label class="tst-acc-head" for="acc-3">
       如何申请共鸣/地标？
       +
     </label>

         入口： 共鸣系统（含地标列表与申请说明）。

         写法建议： 主页只讲“你该去哪儿”，不要把流程全文搬过来。

时间线 / 结构化叙事

适合写“服务器发展脉络/版本纪事”

2023/07/26

Fst 公测开启

围绕 Create 的模组服企划进入公开测试阶段。

（示例）2024

交通与邮政体系成型

铁路枢纽、邮局 NPC、包裹与货运规则逐步完善。

（示例）2025

世界分工更明确

Eden 偏叙事定居；Laputa 偏工业生产与物流。