如 何 制 作 一 个 像 本 站 一 样 的 网 站
HOW TO DO A SITE LIKE THIS

























如果你有一定的HTML编程基础，又想制作一个类似此站的网站，那么你可以按照以下步骤来实现：

1、导入我们提供的CSS和JavaScript文件

<link href="https://site-cn-912-introduce.pages.dev/site-main.css">
<script src="https://site-cn-912-introduce.pages.dev/site-main.js"></script>

2、在HTML文件中添加必要的结构和元素，例如导航栏、内容区域、页脚等


<body id="html-body"> <div class="top-banner"> <div class="banner-lines"> <span></span> <span></span> <span></span> </div> <div class="banner-logo"> <img src="https://iili.io/B4BhmcN.png" alt="912标志" style="background: rgba(0, 0, 0, 0);"> </div> <div class="banner-text"> <span class="main-title">SITE-CN-912 "星辰"</span> <span class="sub-title">CONTAINMENT And RESEARCH SITE</span> </div> </div> <div id="skrollr-body"> <a name="page-top"></a> <div id="container-wrap-wrap"> <div id="header"> <div id="top-bar"> <div class="top-bar"> <ul> <li> <span>SCP系列</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-10">系列 X (9000 - 9999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-9">系列 IX (8000 - 8999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-8">系列 VIII (7000 - 7999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-8-tales-edition">» 系列 VIII 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-7">系列 VII (6000 - 6999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-7-tales-edition">» 系列 VII 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-6">系列 VI (5000 - 5999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-6-tales-edition">» 系列 VI 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-5">系列 V (4000 - 4999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-5-tales-edition">» 系列 V 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-4">系列 IV (3000 - 3999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-4-tales-edition">» 系列 IV 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-3">系列 III (2000 - 2999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-3-tales-edition">» 系列 III 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-2">系列 II (1000 - 1999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-2-tales-edition">» 系列 II 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series">系列 I (001 - 999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-1-tales-edition">» 系列 I 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/joke-scps">搞笑SCP</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/joke-scps-tales-edition">» 搞笑SCP故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-ex">已解明SCP</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/explained-scps-tales-edition">» 已解明SCP故事</a></li> </ul> </li> <li> <span>故事</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/foundation-tales">基金会故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/canon-hub">设定</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/series-archive">故事系列</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/incident-reports-eye-witness-interviews-and-personal-logs">事故报告</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/creepy-pasta">Creepy-Pasta 归档</a></li> </ul> </li> <li> <span>图书馆</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/user-curated-lists">用户推荐清单</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/log-of-anomalous-items">异常物品记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/log-of-extranormal-events">超常现象记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/log-of-unexplained-locations">未解明地点记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/goi-formats">GoI格式</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/audio-adaptations">音频记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-artwork-hub">艺术作品</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/contest-archive">征文竞赛</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/wanderers:start">被放逐者之图书馆</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/wanderers:the-library-cn">原创图书馆中心</a></li> </ul> </li> <li> <span>SCP-CN系列 <ul> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-5">CN系列 V (CN-4000 - CN-4999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-4">CN系列 IV (CN-3000 - CN-3999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-4-tales-edition">» CN 系列 IV 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-3">CN系列 III (CN-2000 - CN-2999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-3-tales-edition">» CN 系列 III 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-2">CN系列 II (CN-1000 - CN-1999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-2-tales-edition">» CN 系列 II 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn">CN系列 I (CN-001 - CN-999)</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-series-cn-1-tales-edition">» CN 系列 I 故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/joke-scps-cn">搞笑SCP-CN</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/scp-ex-cn">已解明SCP-CN</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/explained-and-joke-cn-scps-tales-edition">搞笑和已解明SCP-CN故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/log-of-anomalous-items-cn">原创异常物品记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/log-of-extranormal-events-cn">原创超常现象记录</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/foundation-tales-cn" >原创基金会故事</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/short-stories" >原创短篇故事合集</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/canon-hub-cn" >原创设定</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/series-archive-cn" >原创故事系列</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/contest-archive-cn" >中文分部征文竞赛</a></li> </ul> </li> <li> <span>SCP国际</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/scp-international">SCP国际翻译中心</a></li> <li><a href="http://scp-int.wikidot.com/">SCP国际翻译站</a></li> <li><a href="http://scpfoundation.net/">Фонд SCP (-RU)</a></li> <li><a href="http://ko.scp-wiki.net/">SCP 재단 (-KO)</a></li> <li><a href="http://fondationscp.wikidot.com/">Fondation SCP (-FR)</a></li> <li><a href="http://scp-pl.wikidot.com/">Fundacja SCP (-PL)</a></li> <li><a href="http://scp-es.com/">La Fundación SCP (-ES)</a></li> <li><a href="http://scp-th.wikidot.com/">สถาบัน SCP (-TH)</a></li> <li><a href="http://scp-jp.wikidot.com/">SCP財団 (-JP)</a></li> <li><a href="http://scp-wiki-de.wikidot.com/">SCP Foundation (-DE)</a></li> <li><a href="http://fondazionescp.wikidot.com/">Fondazione SCP (-IT)</a></li> <li><a href="http://scp-ukrainian.wikidot.com/">Фонд SCP (-UA)</a></li> <li><a href="http://scp-pt-br.wikidot.com/">Fundação SCP (-PT/BR)</a></li> <li><a href="http://scp-cs.wikidot.com/">SCP Nadace (-CS)</a></li> <li><a href="http://scp-vn.wikidot.com/">Tổ Chức SCP (-VN)</a></li> </ul> </li> <li> <span>背景资料</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/about-the-scp-foundation">关于基金会</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/groups-of-interest">相关组织</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/object-classes">项目等级</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/personnel-and-character-dossier">职员档案</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/security-clearance-levels">安保许可等级</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/secure-facilities-locations">安保设施</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/task-forces">机动特遣队</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/departments">基金会部门</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/groups-of-interest-cn">中国相关组织</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/secure-facilities-locations-cn">中国分部设施</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/task-forces-cn">中国分部机动特遣队</a></li> </ul> </li> <li> <span>指导</span> <ul> <li><a href="https://scp-wiki-cn.wikidot.com/guide-hub">指导中心</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/guide-for-newbies">新手指南</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/how-to-write-an-scp">如何撰写一篇SCP文档</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/image-use-policy">图像使用守则</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/licensing-guide">授权指南</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/tag-guide">标签指导</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/tag-search">标签搜索</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/translation-movement-guide">翻译发布及搬运指南</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/translation-rules">翻译与校对守则</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/faq">常见问题解答</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/site-rules">网站站规</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/deletions-guide">删帖指导</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/criticism-policy">批评守则</a></li> <li><a href="https://scp-wiki-cn.wikidot.com/links">链接</a></li> </ul> </li> <li> <span>所有子页面</span> <ul> <li><a href="404.html">404页面（404.html）</a></li> <li><a href="index.html">index.html</a></li> <li><a href="years.html">周年页入口</a></li> <li><a href="SITE-912.html">SITE-CN-912介绍页</a></li> <li><a href="AREA-913.html">AREA-CN-913介绍页</a></li> <li><a href="color.html">色板库</a></li> <li><a href="font.html">字库</a></li> <li><a href="how_to_do_a_site_like_this.html">如何创建类似站点</a></li> <li><a href="provision.html">关于版权</a></li> </ul> </li> </ul> </div> </div> </div> </div> <br><br><br><br><br><br> <div id="content-wrap"> <div id="page-content"> <div class="text-bg"> <h1 style="color:blue; text-align: center;">SITE-CN-912 星辰</h1> <br> <h2 style="color:darkblue; text-align: center;" class="font-px">Containment And Research SITE</h2> <p style="color:darkblue; text-align: center; font-size: 1.8rem;"><strong>收容与研究站点</strong></p> </div>

正文内容

</div> </div> </div> </div> <br><br><br><br> <div style=" display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important;"> <a href="#html-body" style=" display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important;"> <button class="button-back-to-top" style="margin-left: auto; margin-right: auto;"> <svg viewBox="0 0 384 512" class="svgIcon"> <path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" ></path> </svg> </button></a> </div> <div class="footer-note"> <div class="footer-content"> <span class="footer-site">SITE-CN-912</span> </div> <div class="footer-sub"> <span class="footer-sub-item">控制</span> <span class="footer-sub-dot">.</span> <span class="footer-sub-item">收容</span> <span class="footer-sub-dot">.</span> <span class="footer-sub-item">保护</span> <span class="footer-sub-dot">.</span> </div> </div> </body>

3、使用CSS文件中的样式类来美化你的网页，例如字体、颜色、布局等。以下是完整的样式列表：

样式/选择器 作用
:root定义全局CSS变量（字体、回退字体）
html启用全局平滑滚动
body全局基础样式：背景色、字体、文字颜色
.alt-block-0隐藏元素（display:none）
.alt-block带边框和黄色背景的提示块
.text-bg居中块级元素，带滑动淡入动画
.text-bg h1/h2/h3内部标题依次延迟执行滑动淡入动画
@keyframes slideFadeIn从下往上滑入并淡出模糊的动画
.gradient-gray/.green/.blue/.sky/.red不同颜色的渐变背景块
.blockquote-red-1/.red-2/.gray带边框和渐变背景的引用块（红/灰）
.float-left/.right左右浮动
.image-wrapper图片容器（相对定位，宽100%）
.blur-image/.blur-image-2模糊图片（blur 8px/10px）
.red-bar在图片上居中的半透明红色条
.hidden-text完全透明（opacity:0）
.hidden-text-2半透明（opacity:40，实为40%不透明）
table, th, td表格基础样式：黑底、白字、白边框
.open-text红色模糊文字，悬停时变清晰
.open-text-2红色可点击文字（无模糊）
.content内容容器，段落和标题间距
.scraped-wrapper刮擦效果容器（米色背景，内阴影）
.scraped-layer刮擦文字层（半透明等宽字体，不可交互）
.clear-text清晰文字层（毛玻璃背景，高z-index）
del删除线样式（红色删除线）
summary::-webkit-details-marker隐藏details元素的默认三角标记
.audio-wrapper音频播放器外层容器
.scp-audio播放器卡片（深色渐变背景，圆角边框）
.audio-info音频标题与时长行（flex布局）
.audio-title标题样式（渐变文字）
.audio-time时长文字（半透明）
.audio-controls控制栏flex容器
.ctrl-btn控制按钮（圆形，半透明）
.ctrl-btn.play播放按钮（稍大，渐变背景）
.ctrl-btn.speed倍速按钮（矩形，粗体小字）
.audio-progress进度条轨道
.audio-progress-fill进度条填充（蓝色渐变）
.volume-wrap音量控制区域（flex）
.vol-icon音量图标（半透明）
.volume-slider音量滑块（自定义样式）
.title-line标题左侧带渐变竖条装饰
.title-line::before竖条装饰，悬停时伸长
.title-label渐变文字标题（蓝色系）
.title-label .sub副标题部分（普通颜色）
.nuke-title核弹标题（蓝色渐变，悬停变红色）
.title-line-2同.title-line，但文字颜色不同
.spacer宽度20px的行内空白占位
.block-line左侧带竖条装饰的可点击块
.top-bar导航栏容器（毛玻璃效果）
.top-bar > ul一级菜单列表（flex居中）
.top-bar > ul > li一级菜单项（相对定位）
.top-bar > ul > li > a/span一级菜单链接（块级，悬停变色）
.top-bar > ul > li ul二级菜单（绝对定位，默认隐藏）
.top-bar > ul > li:hover ul悬停时显示二级菜单
.top-bar > ul > li ul li a二级菜单链接（滑动背景效果）
.top-bar > ul > li ul li a::before红色滑动背景（宽度动画）
@media (max-width:768px)移动端导航：垂直排列，子菜单展开式
#main-content, #page-content主内容区（最大宽820px，居中）
a:not(li a)非导航链接样式（蓝色，悬停上浮）
.blockquote-red-2（重定义）全屏宽红色渐变块（负边距拉伸）
#top-bar, .top-bar导航栏z-index强制最高
hr自定义水平分割线（宽度动画）
h3标题样式（大号，带左右装饰竖条和下划线动画）
h3::before/after左右竖条装饰
h3 .line-underline底部下划线（宽度动画）
h3（重定义）强制表格居中显示
.cassie-intro正文段落样式（浅灰色，行高1.8）
.acronym缩写词（蓝色高亮，悬停发光）
.highlight-data高亮数据（米黄色粗体）
.cassie-section章节容器（底部间距）
.cassie-title-1/2/3三级标题（左侧竖条装饰，颜色不同）
table（重定义）表格：深色背景，红色边框
th表头：深红渐变背景，蓝色文字
tbody tr:hover行悬停变红
tbody td::before单元格悬停红色填充动画
.image-caption-wrapper图片带底部标题的容器
.image-caption-wrapper .caption半透明黑色底部标题栏（带噪点纹理）
.dialogue对话行（左右浮动标签+内容）
.dialogue .speaker.left/right左右浮动发言者标签
.dialogue-block对话块容器
.location-title地点标题（红色加粗）
.action-desc动作描述（斜体灰色）
.timestamp时间戳（红色加粗）
.narrative叙述文字（浅灰色，行高1.7）
.inventory-list清单列表（无项目符号，带▸前缀）
.file-deleted-wrapper文件已删除全屏宽背景（带扫描线和故障动画）
.file-deleted-text大号红色删除文字（闪烁+重影）
.file-deleted-sub副标题（闪烁）
.file-deleted-ghost幽灵重影文字（移动动画）
.dialogue-heilan黑蓝对话（左对齐蓝色边框）
.dialogue-gray灰色对话（右对齐红色边框）
.state-desc状态描述（斜体，左边框）
.env-desc环境描述（灰蓝色加粗）
.clearfix清除浮动（高度0，隐藏溢出）
.dialogue-wrap对话包裹容器（溢出隐藏）
.dialogue-label对话标签（左右颜色不同）
.warzone-atmosphere战区氛围层（固定定位，全屏，扫描线+闪白）
.warzone-atmosphere .scanline-layer扫描线动画层
.warzone-atmosphere .flash-layer闪白层（可激活）
.top-banner顶部横幅容器
.banner-lines斜向装饰线条组
.banner-logoLOGO容器（112x112）
.banner-text标题文字组
.banner-text .main-title主标题
.banner-text .sub-title副标题
.footer-note页脚（居中，含噪点纹理）
.footer-divider-line装饰分隔线
.footer-content页脚内容flex容器
.footer-note .footer-site网站名称（大号字距）
.footer-sub副信息行
.footer-sub .footer-sub-item副信息项（斜体小字）
.font衬线字体（大号）
.font-px等宽字体
.redacted-block涂黑块（红色边框，居中，不可选）
.redacted-block .label涂黑块标签（红色大写）
::-webkit-scrollbar 系列自定义滚动条（细蓝条，发光）
*（scrollbar）Firefox滚动条样式
.top-bar（动画）导航栏模糊淡入动画
.top-bar > ul（动画）菜单下滑淡入
.banner-logo/.banner-text（动画）从左滑入
thead（动画）表头下滑淡入
@keyframes blurIn/slideDownFade/slideLines/lineColor/slideLeftIn各类入场动画关键帧
.button-back-to-top返回顶部按钮（悬停展开文字）
.button-back-to-top .svgIcon按钮图标（悬停上移）
code行内代码样式（深色背景，等宽字体）
SITE-CN-912
控制 . 收容 . 保护 .