Site-CN-96 版式

待做

• 侧栏样式
• 顶栏和谐优化
• 评分模块
• tabview和表格

这是一个未完成版式，有部分模块存在未修正问题。

评分模块：

带著作信息的评分模块：

著作信息

---

本版式是Dr Talcite为Site-CN-96做的Sigma-9版式，基于个人对其站点设定风格和美学的理解，目前仍在完善中，如有问题，可以私信反馈给我。

图片信息：版头logosite-cn-96-white.png，由Dr Talcite参考站点中心页的96.png以及Yosk-San king的初稿重制成单色版本。

版头背景图horizon.jpg，来自Yosk-San king发送的图片，由Dr Talcite修改。

---

本版式是Dr Talcite为Site-CN-96做的Sigma-9版式，基于个人对其站点设定风格和美学的理解，目前仍在完善中，如有问题，可以私信反馈给我。

一级标题

• 无序列表
• 无序列表2
  • 无序列表3

二级标题

1. 有序列表
2. 有序列表2
   1. 有序列表3

三级标题

四级标题

五级标题

六级标题

在页面任何位置添加如下语句以应用此版式：

[[include :area-cn-02:component:site-cn-96]]

可选动态版头：（效果预览）

[[include :area-cn-02:component:site-cn-96 header=-]]]

动态版头

---

可选部门替换标题：

历史复原部：

[[include :area-cn-02:component:site-cn-96 fuyuan=-]]]

普通版头

动态版头

历史掩盖部：

[[include :area-cn-02:component:site-cn-96 yangai=-]]]

普通版头

动态版头

可以与动态版头结合使用，但需要在header选项后加一个竖杠（|）。例如：

[[include :area-cn-02:component:site-cn-96 header=-]| fuyuan=-]]]

测试图像

请勿通过@import 方式引入本版式。你当然完全可以这么做，但通过 [[include]] 来引入版式可以将你的页面加入到“反向链接”清单里。当本版式更新升级时，可以看到哪些页面会受到影响。

标题	标题	标题	标题	标题	标题
内容	内容	内容	内容	内容	内容

---

一个可能存在的链接。

|

一个已访问的链接。

|

一个空链接。

---

tab

占位符

长tab

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

这是一个长的tab，它有很多文字。

空tab

---

谓头若降简诗同程粒助快哥称。工右烈坐落口？货术比商站。专认效理日缩攻停妒器？且又英期酒端步著费定，突自行等眼请她，照钟零既探乾雷掉耐。织人菜示输央胡影理路望。室报免内线亚父？

立却周面停者围。害站采海台。孔样难层布导仍单改？思医热精亮被，响古杂危党饭地置复。气树径烈找胡自杂，输川求攻反盟移。武育初亮行终哥点产业爱我，早海迫响固贵的木地土谁。

且销赶终德山费整口房愿油染点。做社石步益空杂钟草季生缺班。船注集地取代轴振热。原找终危精耐素双逐座著划。沉员设且该苗消习实伤阿，香名孔章商虽溶控担致举钟伯。序校参升各激汉初简矛紧，饭告河收连度水罗展白吃任。鲁办感快超师抓扩发集席。台调确协能货阶太县曾笑温急，长川维练月步，强误复联沿麼战块决声。

功量末参是妒概胜。编操律浓将率井会球牛列担反挥！类乎义端京型重板式备起元正。副维专助缺延搞液脚密促土让。重配其关王经影围两。粮景任城队把包案指望。探销态源此位片县关跑用决逐需。状条按灯严。

---

（--paper-yellow）

泛黄纸色 255, 252, 244

（--seal-red）

印章红 194, 42, 59

---

○ 展开源代码

/* Kanit 字体 */
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
 
/* 柳体 */
@import url(https://fastly.jsdelivr.net/gh/Etinjat/Font-CSS@main/Typeface-Liu_ti.css);
 
/*
=================
汇文明朝
Huiwen mincho
------------------------------
by 近现代中文印刷品
编录：天王帝廷
授权协议同 Oradano明朝
来源：https://tieba.baidu.com/p/7193815211
=================
*/
 
@import url(https://fastly.jsdelivr.net/gh/Crimone/typefaces@main/Huiwen-Mincho/Huiwen-Mincho.css);
 
/* =================
新愚公沧桑体
XinYuGongCangSangTi
------------------------------
by 新愚公
授权：SIL Open Font License 1.1
来源：https://www.maoken.com/freefonts/7186.html
=================*/
 
@font-face { 
    font-family: 'XinYuGongCangSangTi';
    font-style: normal; 
    font-weight: 400; 
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/Etinjat/Fonts@main/FONT_XinYuGongCangSangTi.woff2') format('woff2');
}
 
/*
    Powered on 2025
    [2024 Wikidot Theme]
    Created by Dr Talcite
    CC BY-SA 3.0
*/
 
/* 版式主题色 */
 
:root {
    --paper-yellow: 255, 252, 244;
    --seal-red: 194, 42, 59;
}
 
body {
    font-family: "Cambria Math", "宋体", serif;
    letter-spacing: 0.03em;
    background-color: rgb(var(--paper-yellow));
}
 
/* 版头标题和logo */
 
div#header h1 a span {
    font-size: 0px;
}
div#header h1 a:before {
    content: "Site-CN-96";
    font-family: "Kanit", Verdana, sans-serif;
    font-weight: 700;
    color: rgba(238, 238, 238, 1);
    text-shadow: 3px 1px 5px black;
}
div#header h2 span {
    font-size: 0px;
    padding: 5px 0;
}
div#header h2:after {
    content: "工业 民俗 历史";
    font-weight: bold;
    font-size: 110%;
    color: rgba(240, 240, 192, 1);
    white-space: pre;
    text-shadow: 2px 1px 2px black;
}
 
div#header {
    background-image: url(https://area-cn-02.wikidot.com/local--files/component:site-cn-96/site-cn-96-white.png);
}
 
@media (min-width: 979px) {
div#header {
    background-size: 100px 100px;
}
}
 
/* 版头图片 */
div#container-wrap {
    background: none;
}
 
#extra-div-1 {
    width: 100%;
    height: 163px;
    top: 0;
    position: absolute;
    background-color: rgb(87, 107, 166);
    background-image: 
url(https://area-cn-02.wikidot.com/local--files/component:site-cn-96/horizon.jpg), 
linear-gradient(to bottom, 
rgb(92, 110, 172) 0px, 
rgb(189, 163, 202) 100px, 
rgb(254, 179, 170) 124px, 
rgb(254, 130, 42) 138px, 
rgba(0, 0, 0, 0.5) 141px, 
rgba(0, 0, 0, 1) 161px, 
rgba(0, 0, 0, 0.5) 163px);
    background-repeat: repeat-x;
    background-size: 100% calc(100% + 10vw), contain;
    background-position: 0 90%;
}
 
/* 登录信息 */
 
#login-status, #login-status a {
    color: black;
}
 
/* 侧栏 */
 
/* 页面标题 */
 
h1, h2, h3, h4, h5, h6, #page-title, .meta-title, .heading {
    font-family: punctuation-marks, Huiwen-mincho, "Liu ti", "仿宋", serif;
}
 
#page-title,
.meta-title {
    border-color: rgb(var(--seal-red));
    border-width: 2.5px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.06em;
}
 
/* 评分模块 */

动态版头

/* 顶栏遮挡色条 */
 
div#container-wrap {
    background-image:
linear-gradient(to bottom,
transparent 0px,
transparent 135px,
#252325 135px,
#252325 163px,
transparent 163px);
    background-size: 100% 163px;
    background-repeat: no-repeat;
}
 
/* 隐藏原版式的头图 */
 
#extra-div-1 {
    display: none;
}
 
/* 新头图 */
 
#extra-div-2 {
    z-index: -1;
    width: 100%;
    height: 163px;
    top: 0;
    position: absolute;
    background-color: rgb(87, 107, 166);
 
    background-image:
 
/* 四层结构 */
 
/* 第一层：电线杆剪影 */
 
url(https://area-cn-02.wikidot.com/local--files/component:site-cn-96/poles-silhouette-3.png),
 
/* 第二层：天际线工厂剪影 */
 
url(https://area-cn-02.wikidot.com/local--files/component:site-cn-96/skyline-silhouette.png),
 
/* 第三层：落日背景 */
 
url(https://area-cn-02.wikidot.com/local--files/component:site-cn-96/sunset.png),
 
/* 第四层：当图片未加载出来时，在最底层显示的fallback渐变 */
 
linear-gradient(to bottom,
rgb(92, 110, 172) 0px,
rgb(189, 163, 202) 100px,
rgb(254, 179, 170) 124px,
rgb(254, 130, 42) 138px,
rgba(0, 0, 0, 0.5) 141px,
rgba(0, 0, 0, 1) 161px,
rgba(0, 0, 0, 0.5) 163px);
 
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
    background-size: 200% 110%, 50%, cover, contain;
    background-position: 0% 0%, 0% 80%, 0% 83%, 0 0;
 
    -webkit-animation: slide 15s linear infinite;
    -moz-animation: slide 15s linear infinite;
    -o-animation: slide 15s linear infinite;
    animation: slide 15s linear infinite;
}
 
/* 分层滑行动画：
远景天际线缓慢向右移动，
近景电线杆快速向右移动 */
 
@keyframes slide {
    0% {background-position: 0% 0%, 0% 80%, 0% 83%, 0 0;}
    100% {background-position: -8000% 0%, 100% 80%, 0% 83%, 0 0;}
}

历史复原部

div#header {
    background-image: url(https://area-cn-02.wdfiles.com/local--files/component%3Asite-cn-96/history-recovery-white.png);
}
 
div#header h1 a span {
    font-size: 0px;
}
 
div#header h1 a:before {
    content: "历史复原部";
    font-family: "Liu ti", "仿宋", serif;
    font-weight: bold;
    font-size: 95%;
    color: rgba(240, 240, 240, 1);
    white-space: pre;
    text-shadow: 2px 1px 2px black;
}
 
div#header h2 span {
    font-size: 0px;
    padding: 5px 0;
}
 
div#header h2:after {
    content: "回溯，铭记，存续";
    font-weight: bold;
    font-size: 110%;
    color: rgba(240, 240, 192, 1);
    white-space: pre;
    text-shadow: 2px 1px 2px black;
}
 
#extra-div-1 {
    filter: grayscale(0.9);
}
 
#extra-div-2 {
    filter: grayscale(0.9) brightness(1.2);
}

历史掩盖部

div#header {
    background-image: url(https://area-cn-02.wdfiles.com/local--files/component%3Asite-cn-96/history-obscuration-white.png);
}
 
div#header h1 a span {
    font-size: 0px;
}
 
div#header h1 a:before {
    content: "历史掩盖部";
    font-family: "Liu ti", "仿宋", serif;
    font-weight: bold;
    font-size: 95%;
    color: rgba(240, 240, 240, 1);
    white-space: pre;
    text-shadow: 2px 1px 2px black;
}
 
div#header h2 span {
    font-size: 0px;
    padding: 5px 0;
}
 
div#header h2:after {
    content: "虚假，掩盖，诱导";
    font-weight: bold;
    font-size: 110%;
    color: rgba(240, 240, 192, 1);
    white-space: pre;
    text-shadow: 2px 1px 2px black;
}
 
#extra-div-1 {
    filter: invert(1) grayscale(1) brightness(0.5) sepia(0.5) hue-rotate(350deg);
}
 
#extra-div-2 {
    filter: invert(1) grayscale(1) brightness(0.5) contrast(1.5) sepia(0.5) hue-rotate(350deg);
}
 
/* 防止用户信息在黑底上看不清 */
 
#login-status, #login-status a {
    color: white;
}