代码教程

前言
--

* 咳，如你所见这是个代码教程，但是实际上它连个正经教程都算不上，只能算我个人的一些相关笔记。
* 我本人的代码也特别烂，撑死了能也就能写点改颜色的版式什么的，以下内容多半也是在我通过ctrl+c/+v大法搞版式的时候自己摸出来的，因此可能会有一些错误，也欢迎各位指正错误。
* 本教程仅针对一些初级到不能再初级的代码内容，想要进阶学习请移步backrooms fandom主站的代码教程
* 事实上主站那个代码教程里包括我下面要讲的这些东西，但是并不细致，所以我对这部分最常用的代码进行一个更细致的讲解。
* 基本上都是大白话，不包括对代码原理的解释。
* 本文所有内容基于电脑端网页编辑页面的“源代码编辑器”模式，一时半会实在学不会你直接用可视化编辑模式编辑也是可以的。
* 请注意，backrooms fandom中分主站的一部分自定义模板代码无法在本wiki使用（比如生存难度代码之类的）。
* 生存难度相关内容还在设计中，敬请谅解。

#### **使用示例：**

**1.代码：**

**2.效果：**
一号文本

二号文本

三号文本

* num处随意填写一个阿拉伯数字即可，但需要注意的是，num处数字相同的两个折叠模块会在你点击其中一个的时候同时展开。
* initial后内容即为点击前显示的文本，final与body后为点击后显示的文本。
* 不同的是，点击final处文本折叠模块便会收起，而点击body处的则不会。

## div style/框框

* 非常常用的一种代码模板，主页的那些金色框框也是通过它实现的。
* 基本格式为<div style="......">（框框内文字内容）</div>
* 前面的<nowiki><nowiki>和后面的<nowiki><nowiki>可以看作是括号的前后两半，你可以理解为只有在这个括号里面的东西才会被放进框框里

#### **使用示例：**

**1.代码：**<div style="padding:10px;width:450px;background-color:#EDDCA3;border:solid 5px #D8C689;margin:1em;text-align:left;font-size:17px;border-radius: 15px;color:#A49355;font-family:CangerW02;text-shadow:0 0 3px rgba(0,0,0,0.2)">这是一个示例</div>

**2.效果：**

这是一个示例

* 这一长串参数看起来很头晕对吧（）
* 呆胶布，下面我会挨个解释这些参数的作用。

### 1.float

* 例：float:left
* 整个框框的浮动位置，参数总共有left,right,center三种，我不过多赘述（总之就是靠左、靠右、位于页面中心三种浮动位置）
* 对于排列的具体讲解请见backrooms fandom主站的代码教程

### 2.padding

* 例：padding:10px
* 大概可以理解为页边距，即框框内文字到边框的距离。
* px指像素，1px即1像素的距离；事实上大部分以px为单位的参数也可以使用em作为单位（em一般情况下等于16px，有点复杂所以我不建议你用这个单位）

### 3.width/height

* 例：width:450px;height:450px
* 框框的长和宽。
* 把这俩参数删了也行，删了以后框框的大小就会由其中文字的大小决定了，有时候容易出莫名其妙的排版bug（比如文字溢出框框外什么的），因此除非必要不建议这么用。

### 4.background-color

* 例：background-color:#EDDCA3
* 背景颜色设置，即框框主体的颜色。
* 可以直接使用red、green这样英文里描述的词，也可以使用16进制颜色代码（就是示例用的这个），还可以使用rgba，像这样↓
***color:rgba(230,207,103,0.5)***
* 我推荐是用绘画软件或者什么东西调个你想要的颜色，然后找个16进制颜色编码转换器把rgb输进去，最后复制该颜色的16进制编码贴过来。
* 光影red、green这种描述方式，建议百度一个颜色对照表然后看一看各种颜色对应的英文名称（不太好对比颜色，我不建议用），大部分颜色是有自己特殊的英文名称的，比如PaleVioletRed什么的。

### 5.border

* 例：border:solid 5px #D8C689
* 框框的边框设置。
* 从左至右三个参数依次为：边框样式、边框粗细和边框颜色。
* 边框样式有solid（实线）、dshed（虚线）、hollow（无边框）三种，可以根据需要调整。
* ~~事实上就算你输一排乱码进去它也会是无边框的效果~~

### 6.margin

* 例：margin:1em
* 可以理解为整个框框到整个网页的间距，可以使用em和px作为单位。（关于em的解释见上）

### 7.text-align

* 例：text-align:left
* 文本对齐方式，共有left,right,center,justify四种。
* 前三种不过多赘述，justify这种大概是基于文本本身的一种对齐方式，其他则是基于整体位置的对齐方式。
* justify效果和left差不多，你可以不用管它直接用left。

### 8.font-size

* 例：font-size:17px
* 字体大小。

### 9.border-radius

* 例：border-radius: 15px
* 边框的圆角大小，举个例子：

这是border-radius: 15px的

这是border-radius: 70px的

* 其实只要你参数合适你甚至可以得到一个圆形框框（草）。

### 10.color

* 例：color:#A49355
* 字体颜色。

### 11.font-family

* 例：font-family:CangerW02
* 字体种类。

### 12.text-shadow

* 例：text-shadow:0 0 3px rgba(0,0,0,0.2)
* 字体阴影。
* 数值依次是文本在水平和竖直方向的偏移量、模糊半径和阴影颜色值。

* 事实上，div style这个代码不仅可以用作搞个框框出来，仅用作修改文本颜色/大小/字体等也是可以的。
* 只要不写background-color、border等参数，只写字体相关的就可以直接把它当成调整字体的代码使用。
* 单独调整字体的span style代码请见backrooms fandom主站代码教程
* span style这种用法在实操上经常会出现失灵等问题导致效果没办法实现，个人不推荐使用，使用div style足矣

## 排版相关

### **换行**

* fandom的换行相当抽风，有时候预览的时候还是好好的一保存就挤一起了。
* 因此！推荐使用<br>来进行换行。

### **各种文字效果**

* ~~删除线~~：
要添加删除线的文字

* 分割线：<hr>（就是下面这条线）

* 下划线：<u>要添加下划线的文字</u>
* ←看见每行文字前面这个点了吗，想要让它出现需要在页面源代码编辑里面在每行加上一个“\*”，以及这个点自带换行并且只能在作为每行第一个字符时才会起作用
* *文本倾斜*：''要倾斜的文字''，注意使用的引号是英文引号，主站的代码教程有更深入的倾斜方法，这里我只讲最简单最基础的一种
* **文本加粗**：'''要加粗的文字'''，使用的引号同样是英文引号

其他
--

### **隐藏目录**

* 一般来说只要你使用了标题字体（上面的“其他”二字就是标题字体），那么这个网页的最上面就会有一个目录
* 想要隐藏请使用\_\_NOTOC\_\_
* 想要显示目录请在想要让目录出现的位置写上\_\_TOC\_\_

## 主框架模板

* 是的就是主页拿来放文字的那个黄框框，我搞了个模板这样就不用每次复制一大串代码了。
* 目前还在调试中，不建议使用。

**1.代码：**

{{MainFrame
}}

**2.效果：**

你好！