代码教程

注意事项：

* 阅读本文建议开亮色模式，就是右上方有放大镜和省略号的那一栏，找到一个太阳点一下（如果你显示的是月亮，说明你已经处于亮色模式，按一下月亮就麻溜地变回去了
* 本站的代码应使用Wikitext，而不是其它奇奇怪怪的代码语言
* 本文内容仅为需要效果的写手提供便利，深奥的网站开发请直接百度
* 如果你看不懂代码的表达方式，没关系，有个工具叫做“复制”
* 如果你有什么优秀的代码希望补充的，欢迎在本文“专项拓展”里添加，序号往下编就行
* 本文可以看作装逼工具，只有在你不得不切换到源代码编辑时才需要用到
* 请记住，**文章内容永远大于效果**，更精彩的效果除了闪瞎管理员之外不会给你带来任何好处，除非你的文章内容本身足够精彩，如果你有好文却没有好的效果，请在文中指出，管理员心情好的时候会帮你完善的
* 你可以在“专项拓展”中完善或添加内容，但不要删除别人添加的内容，那是管理员干的事

在了解了这些要求之后，你就可以安心地~~闪瞎管理员~~为你的文章增光添彩了

## 字体与颜色

* 代码
* 效果

<span style="color:red;">Hello World</span>
##### 　附注

恭喜你，这行字变成红色了，如果你想更随心所欲一些，可以搜索一下十六进制颜色码用在这里，玩得开心！

Hello World
代码示例 1-1

**ZCOOL XiaoWei** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:ZCOOL XiaoWei;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Ma Shan Zheng**

使用方法: <span style="font-family:Ma Shan Zheng;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Long Cang** ***注意：此字体默认大小较小，请注意字号。***

使用方法: <span style="font-family:Long Cang;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Zhi Mang Xing** ***注意：此字体不易辨识，请慎用。***

使用方法: <span style="font-family:Zhi Mang Xing;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Noto Serif SC**

使用方法: <span style="font-family:Noto Serif SC;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin75W**

使用方法: <span style="font-family:Genshin75W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**Genshin55W**

使用方法: <span style="font-family:Genshin55W;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**CangerW02**

使用方法: <span style="font-family:CangerW02;"> 内容 </span>

样式预览:  敏捷的棕色狐狸跳过了一只懒惰的狗。The quick brown fox jumps over a lazy dog.

**声明：字体列表引用自F版后室，非本网站原创**

别问我为啥用这句话，backrooms里用的这句话。

下面进入更高级的装逼环节

## 阴影+颜色

可以营造出一些氛围，主要是凸显效果的

* 代码
* 效果

<span style="color:red;text-shadow: 0 0 10px red;">Hello World</span>

Hello World
代码示例 1-2

* 代码
* 效果

<span style="color:white;text-shadow: 0 0 10px red;">''Hello World''</span>
##### 　附注

看看效果，有那感觉了吧

*Hello World*
代码示例 1-3

## 大小、删除线、加粗与倾斜

* 代码
* 效果

<big>Hello World</big>
##### 　附注

加大字号，变小的话把所有的big换成small，在此不演示了（搞这个表真的很费劲

Hello World
代码示例 1-4

* 代码
* 效果

Hello World

##### 　附注

删除线，具体看效果

~~Hello World~~
代码示例 1-5

* 代码
* 效果

'''Hello World'''
##### 　附注

加粗，具体看效果

**Hello World**
代码示例 1-6

* 代码
* 效果

''Hello World''
##### 　附注

倾斜，具体看效果（逐渐不耐烦

*Hello World*
代码示例 1-7

模板
--

详见模板的使用教程，这里简单给一点

* 代码
* 效果

{{Class 1}}
##### 　附注

~~作死成功率~~生存难度模板

**生存难度：**

*Class I*

**》安全**

**》已勘探完全**

**》实体数量极少**

代码示例 1-8

所有生存难度模板请点这里

## 有关鼠标悬停的一些装逼操作

* 代码
* 效果

<span title="Hello World">把鼠标放在这段文字上试试！</span>

把鼠标放在这段文字上试试！
代码示例 1-9

你也可以制造一些卡顿或者假冒链接的~~恶作剧~~小创意。
具体如下：

* 代码
* 效果

<span style="cursor:default">default</span> <span style="cursor:context-menu">context-menu</span><br><span style="cursor:help">help</span> <span style="cursor:pointer">pointer</span><br><span style="cursor:progress">progress</span> <span style="cursor:wait">wait</span><br><span style="cursor:cell">cell</span> <span style="cursor:crosshair">crosshair</span><br><span style="cursor:text">text</span> <span style="cursor:vertical-text">vertical-text</span><br><span style="cursor:alias">alias</span> <span style="cursor:copy">copy</span><br><span style="cursor:move">move</span> <span style="cursor:no-drop">no-drop</span><br><span style="cursor:not-allowed">not-allowed</span> <span style="cursor:grab">grab</span><br><span style="cursor:grabbing">grabbing</span> <span style="cursor:all-scroll">all-scroll</span><br><span style="cursor:col-resize">col-resize</span> <span style="cursor:row-resize">row-resize</span><br><span style="cursor:n-resize">n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）</span><br><span style="cursor:zoom-in">zoom-in</span> <span style="cursor:zoom-out">zoom-out</span>
##### 　附注

部分鼠标指针在一些系统中可能显示为一种或显示为默认指针。若要使用，建议选取通用性更高的指针。

default context-menu
help pointer
progress wait
cell crosshair
text vertical-text
alias copy
move no-drop
not-allowed grab
grabbing all-scroll
col-resize row-resize
n-resize（可将n替换为e/s/w/ne/nw/se/sw/ew/ns/nesw/nwse，不再展示）
zoom-in zoom-out
代码示例 1-10

## 更多有关阴影的用法

之前介绍了恐怖系的，现在来介绍一些治愈系和崩坏系的:)

* 代码
* 效果

<span style="text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em #0000FF; color: white;">（治愈风格）{{Ruby|I'm here for you.|我在这儿等你。}}</span>

<span style="text-shadow: red 0 -2px;">（崩坏风格）{{Ruby|I'm here for you.|我在这儿等你。}}</span>
##### 　附注

每个阴影值中的数值依次是：文本在**水平**和**竖直**方向的偏移量、**模糊半径**和**阴影颜色值**，看不懂？没关系，多试试就知道了。

（治愈风格）I'm here for you.（我在这儿等你。）

（崩坏风格）I'm here for you.（我在这儿等你。）
代码示例 1-11

## 如何排版

此处我们只介绍怎样把纸上完美的排版搬到电脑上，具体的美术设计一概不谈

~~（其实就是编这篇文章的人不会设计哈哈~~

使用浮动可以改变任意元素（如图像和span标签定义的文本等）在页面中的位置，这对文章的排版起着很大的作用。

举个例子：

浮动实例1

浮动实例2

浮动实例3

```
<div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
<div style="background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例1
</div>
<div style="background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例2
</div>
<div style="background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例3
</div></div>
```

我们可以看到灰色框内有三个小方块，这里没有设置浮动，所以他们都默认地排在了左边。

浮动实例1

浮动实例2

浮动实例3

```
<div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
<div style="background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例1
</div>
<div style="float:right;background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例2
</div>
<div style="background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
浮动实例3
</div></div>
```

如果我们想让绿块排到右边，这时就应该给绿块设置右浮动，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。同理可以对红块和蓝块进行同样的操作。

那么此时就发现了一个问题：浮动区域下方有其他区域时，下方区域总是会上移补位。这个问题主要源于被浮动的区域已经脱离了文件，不再占用空间，因此在计算机看来，它们其实是不存在的，所以就用到存在的区域进行补位。

那么如何解决这个问题呢？一般来说，这个问题无法被解决。但是我们可以通过多种浮动的累加，对区域进行自定义排版：

同时对所有区域设置左浮动或右浮动，它们就会依次排序：（这里使用左浮动作为案例）

浮动实例1

浮动实例2

浮动实例3

可以看到三个方块按顺序从左到右依次排好了。

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:90px;height:90px;">
 浮动实例3
 </div></div>

```
如果按照上述操作设置浮动，包含框太窄，无法容纳水平排列的多个浮动元素，那么其它浮动块向下移动，直到有足够的空间：

浮动实例1

浮动实例2

浮动实例3

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例3
 </div></div>

```
而如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动实例1

浮动实例2

浮动实例3

```
 <div style="background-color:grey;border:solid 1px black;margin:5px;width:318px;height:318px;">
 <div style="float:left;background-color:red;border:solid 1px black;margin:2px;width:130px;height:130px;">
 浮动实例1
 </div>
 <div style="float:left;background-color:green;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例2
 </div>
 <div style="float:left;background-color:blue;border:solid 1px black;margin:2px;width:130px;height:90px;">
 浮动实例3
 </div></div>

```

### 基础折叠

我们从最基础的开始，基础折叠一般使用Collapse模板

* 代码
* 效果

##### 　附注

不难发现，如果你点击body中的“这是第三句话”，你是不能收起这个折叠模块的。这就是final内容与body内容的区别。num=1是用来防止与后面的折叠内容重复的，如果两个折叠内容的num都=1，那么你点开第一个折叠内容，第二个折叠内容也会开启。

这是第一句话

这是第二句话

这是第三句话

代码示例 1-12

需要注意的是，在`{{Collapse}}`模板中添加Wikitext表格代码（即`{|……|}`），其中的“|”会被误解析为Collapse模板的分隔符。
故若要在此模板中嵌入表格，请使用`<table>`标签或将“|”用`{{!}}`替代或嵌入另一模板。
看不懂？没事，老规矩，多试试就知道了。

**密码教程上线！！！**

一些隐藏内容页面时常包括一个假的"登录"框，提示用户输入密码。但其实不需要真正的输入（当然如果你不想让读者登入你只要把自动填入的部分换成“密码错误”就行了），因为点击该框将显示下一节内容并自动填充密码。这可以通过下面这一长串代码来实现。

`<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">`

`<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">输入密码</div></span>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><div class="mw-customtoggle-password mw-customtoggle-password2"> 示例密码</div></div></div>`

`<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><big>已自动填充已缓存密码，欢迎 {{USERNAME}}。</big><br /><br />[示例内容]</div>`

在实践中，这段代码会产生这样的结果：

输入密码
 示例密码
已自动填充已缓存密码，欢迎，未登录用户。

[示例内容]

当然，你也可以对这个折叠样式进行进一步的美化，如下所示：

`<div style="background-color: #FAFAD2; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
'''警告：'''<br>
<code>以下内容已被加密，请输入有效凭证。</code>

'''原因：''' <code>你并未获取浏览这个文件的许可，它要求更高的许可等级。</code>
</div>

<div style="background-color:#FAFAD2; color:#888888; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">
<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">
输入密码</div></span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<div class="mw-customtoggle-password mw-customtoggle-password2">
1234567890</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password">
<br />
<div style="text-align: center><code>'''凭证有效。'''</code></div>
<br />
<div class="mw-customtoggle-first">'''<code><big><u><div style="text-align: center">> 打开文件</div></u>'''</big></code></div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">[示例内容]</div></div>`

效果：

**警告：**

`以下内容已被加密，请输入有效凭证。`

**原因：** `你并未获取浏览这个文件的许可，它要求更高的许可等级。`

输入密码

1234567890

`**凭证有效。**`

**`> 打开文件`**[示例内容]

当然，其中的内容可以自己替换成适合你的文章的内容。

后面还有很多实用和精彩的代码，继续看下去哦！

## 横向折叠标签页

如果你用惯了二级与三级标题的组合，觉得它不够新颖，那么你是时候用到下面的横向折叠标签页了：
下面是一个标签页的使用例子：

`<tabber>`

`|-| 基础描述=`

`[总体概况]`

`|-| 额外信息=`

`[探索日志]`

`|-| 更多信息=`

`[一些神秘事件之类的]`

`|-| 附录=`

`Hello World`

`</tabber>`

效果：

* 基础描述
* 额外信息
* 更多信息
* 附录

[总体概况]

[探索日志]

[一些神秘事件之类的]

Hello World

但请注意，横向折叠会大大缩短你的页面长度，如果你的页面字数过少，我们不建议你采用这种方法。

同时，横向折叠的每部分内容要么是同一主题的不同部分，要么是并列关系，请不要使用过于混乱的组合，这会让读者对你的文章产生一种不好的观感。

表格
--

顾名思义，就是表格，但由于这里不是Excel，所以了解一下怎么创建表格还是很有必要的。
表格在某些情况下是有很用的工具，比如你可以将其用于一些相似现象的汇总介绍中。它旨在将数据组织成均匀的方框。下面代码中的背景颜色（#xxxxxx）可以改成你想要的任何十六进制颜色代码。

`{| class="article-table"

! style="background-color: #d3d3d3" |例 1

! style="background-color: #d3d3d3" |例 2

! style="background-color: #d3d3d3" |例 3

! style="background-color: #d3d3d3" |例 4

结果：

 次分支 1

你也可以用表格来给一些文本增加一个简洁美观的文本背景（这与div style中设置的背景不同），如下：

`{| class="article-table"

!这里是表格标题

( ･ω･` )

∑(ﾟДﾟノ)ノ

(•́へ•́╬)

效果：

( ･ω･` )
∑(ﾟДﾟノ)ノ

其实表格中不应该添加表情包的对叭( ･ω･` )

## 作者信息

我们建议每篇文章后都附加作者信息，尤其是原作者有多位或者原作者与上传者不一致时。

如果你想在你的文最下方注明作者（或合著人/上传人等），你可以使用Author模板。使用格式如下：
效果：

<< 查看作者与附注内容>> 收起作者与附注内容

不重要的侦探A << **原作者**
不重要的侦探B << **修缮及上传**
不重要的侦探C<<**技术支持**
欢迎补充文章内容 << **附注**

当然，有时为了方便，你也可以直接使用一个折叠来注明作者信息，就像这样：
效果：

**> 查看作者与相关信息**

**< 隐藏作者与相关信息**

作者: 不重要的作者
附注：暂无

## 插入文件与图片

理论上，你只能添加本wiki中的文件与图片，你可以先把文件与图片上传到本wiki（省略号中的那个Upload New File），至于能不能突破理论，就看你自己的了，反正本文作者没有突破成功~~

* [[图片名称]]
* [[file]]

如上是代码，注意文件名不要拼错~

后面是插入图片的专项指南

## 插入图片的专项指南

当你需要放置一张已经从主站导入的照片或视频或什么奇奇怪怪的文件时，你可以参照本指南。For example,如果我想把Deepblue.webp这个已经上传到wiki的文件导入到我的页面中，我只需要~~潇洒地~~装作无事发生似的在电脑上打出下面这行代码：

[[File:Deepblue.webp]]

下面是效果：

哇！是不是太大了，那我们压缩一下吧，对于调整大小比较有用的指令包括\*\*\*px、thumb、vertical-align、horizontal-align等，主流的方法是px和thumb。

**[[File:Deepblue.webp|160x200px|thumb|示例图片]]**

   *文件名|大小|样式表|文字描述*

so,现在是不是小很多了呢？

这样子的话我们现在就可以向文章里面放各种奇奇怪怪的照片啦，当然如果不需要描述的话也可以不用加thumb，写出大小就可以将图片放置进文字栏。

**[[File:Deepblue.webp|160x200px]]**

现在看左边，照片就已经放进文字栏了，而且它可以放置到我任何想要放置的位置，像这样：，这样你就可以无缝插入了。（这个适用于自制的表情包等，但请确保图像清晰）

对于文字的描述，效果大概如右边那个图所示：

## 链接页面

一般是将一个页面引到另外一个页面的传送门，如果要是这个页面存在于本wiki的话，那么你只需要在那个Wiki页面的专用后缀那里复制一下，然后粘贴到一对双中括号中间，那么它将会将点击这里的人引到那个wiki页面。举例：

专用后缀：https://operation-avenue.fandom.com/zh/wiki/Operation Avenue Wiki中，Operation Avenue Wiki是页面专用的后缀。你想要跳转到这个页面只需要打出[[Operation Avenue Wiki]]。

但如果不是本wiki的页面的话会相对麻烦一些，你需要用到空格来描述你要引过去的链接。比如:[https://backrooms.fandom.com/wiki/Level\_0 Level 0]，效果：Level 0。

## 专项拓展1：目录显示开关

在文章中插入 \_\_NOTOC\_\_ 即可关闭目录显示；

在文章中任意位置输入 \_\_TOC\_\_ 即可在这里召唤目录（如果你没有关闭目录显示的话）。

## 专项拓展2：换行与分割线

或许你也经历过被Fandom的空行判定逼疯的时候：你明明按了回车，但是预览文本发现连在一起了。

这时候，我们就要请出<br>来辅助空行了。有了它，你甚至可以不用按回车，做到一篇文的所有代码和文案都堆在一坨。

分割线有时对页面美观有着重要作用。

分割线的召唤方法：使用<hr>召唤即可。

分割线后面的内容会被自动挪到下一行。

分割线的例子（就是下面这个横线）：

## 专项拓展3：背景页面设置

如果你想为你的页面增加一点氛围感，设置一个与众不同的背景是一个好的选择
你可以通过Background模板来便捷地设置背景，格式如下：

```
```
无论你的图片多大、是不是1450\*1450px，建议都不要改动图片的大小，除非有特殊需要。如果按第一个使用方法使用，默认大小为1450px。
**参见：**Background模板页
**注意: 页面背景请勿过黑（评判标准为顶部导航栏是否几乎不可视），这违反Fandom个性化条例，详见社区中心。**

## 专项拓展4：分点叙述项

类似段落标题，你可以使用不同数量的“\*”来召唤不同的小叙述项，例如：

`*叙述项：`

`**A`

`**B`

`**C`

效果：

* 叙述项：
	+ A
	+ B
	+ C

与段落标题类似，这玩意儿也只能独占一行才能召唤成功。

你还可以使用`<li> 内容 </li>`来快速达成和使用“\*”类似的效果（这俩玩意儿其实并不完全一致，比如用li召唤的点前面没有空格），而且它还能加style属性标签。但请注意，`<li>` 的叠加使用不能分级，例如：`<li style="color:red;"> 这是第一段话 <li style="color:blue;"> 这是第二段话 <li style="color:grey;"> 这是第三段话 </li></li></li>`
效果：

- 这是第一段话
- 这是第二段话
- 这是第三段话

## 专项拓展5：伪造代码框

其实就是一个方框加一堆折叠，但会让文章看起来非常的富有神秘感或科技感，当然，这得看你怎么用了。

使用方式如下：
`<div style="background: #000000;color: #007D00;border:2px solid #007D00;">
“您已进入程序页面，请执行指令”

<br>
“正在读取数据……”

“[页面内容]”
}}
</div>`

效果：

“您已进入程序页面，请执行指令”

“User\_active=view pages”

“VIEW PAGES”

“正在读取数据……”

“[页面内容]”

## 专项拓展6：更好看的下划线

* 代码
* 效果

{{Underline|FF0000}}
##### 　附注

颜色用十六进制数码表示

代码示例 1-13

## 专项拓展7：倒计时

* 代码
* 效果

<span class="countdown" style="display:none;">还有<span class="countdowndate">December 25 2023 00:00:00</span>就到圣诞节啦！</span>
##### 　附注

此段内容使用了class:"countdown"，来源于Fandom开发者社区。更多用法请在这里查看。
另外，倒计时结束后会自动转变为正计时，到时候记得让管理员来改一下~

还有December 25 2023 00:00:00就到圣诞节啦！
代码示例 1-14 [倒计时]

## 专项拓展8：黑幕与模糊字

* 代码
* 效果

<span class="heimu">此段内容使用了class:"heimu"</span>

此段内容使用了class:"heimu"
代码示例 1-15 [黑幕]

* 代码
* 效果

<span class="spoilerblur">此段内容使用了class:"spoilerblur"</span>
##### 　附注

将鼠标移到模糊块上试试？通过如此，可以产生一个防剧透（模糊）的效果。你可以将它用于一些加密文件上，**但请注意，模糊字的大量使用会严重影响观感**。

此段内容使用了class:"spoilerblur"
代码示例 1-16 [模糊字]

## 专项拓展9：伪造进度条

本wiki支持一些定制的进度条

例如：

`<div class="progress"><span class="text">没有标签的基本进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

没有标签的基本进度条50%

其中“没有标签的基本进度条”是进度条的名字，可以随便改；而"width: 50%"中的50%指的是进度条的宽度；最后的“50%”指的是进度条的进度。

像这样的进度条还有很多种，可以进行自定义处理。（下面列出几个常用的）

不需要进度条名称：

`<div class="progress"><span class="text"></span><span class="bar" style="width: 50%">50%</span></div>`
效果:

50%

暗色进度条：

`<div class="progress dark"><span class="text">没有任何特别之处的普通进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

没有任何特别之处的普通进度条50%

冰火两重天（误）进度条：

`<div class="progress gradient"><span class="text">左边蓝右边红</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

左边蓝右边红50%

圆角进度条：

`<div class="progress round"><span class="text">圆角进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

圆角进度条50%

动画进度条：

`<div class="progress animated"><span class="text">动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

动画进度条50%

一个暗色圆角动画进度条：

`<div class="progress dark round animated"><span class="text">暗色圆角动画进度条</span><span class="bar" style="width: 50%">50%</span></div>`
效果:

暗色圆角动画进度条50%

## 专项拓展10：小型弹窗(pop-up)

* 代码
* 效果

{{Popup|1=<span style="font-weight:bold;">Hello World</span>|inline=1|popup=Popup Content}}

Hello WorldPopup Content
代码示例 1-17 [小型弹窗]

## 专项拓展12：更多字体

* 代码
* 效果

<span style="font-family:Noto Serif SC; color: #ffffff; text-shadow: 2px 0px 0 #00ff00, -2px 0px 0 #ff00ff><i><b><big><big>字体展示</big></big></b></i></span>

***字体展示***
代码示例 1-18

## 专项拓展13：警告框

* 代码
* 效果

{{Collapse|num=1|initial=<div class="mw-body-content mw-content-ltr" lang="zh" dir="ltr"><div class="warningbox mw-warning-with-logexcerpt mw-content-ltr" dir="ltr" lang="zh"><center style="padding:1rem;padding-bottom:0"><strong style="color:red;font-size:18pt;background:rgba(255,0,0,0.2);padding:0.5rem;border-left:12px solid rgba(255,0,0,0.6);border-right:12px solid rgba(255,0,0,0.6);margin-bottom:2rem">警告</strong>
<br><br><div style="margin: 3px 0 8px; height:2px; background:linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-moz-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-ms-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-khtml-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-icab-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-o-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;"></div>
<span style="font-size:14pt">警告内容<br>为您的人身安全着想，极不建议查看此文档。</span>
<div style="margin: 3px 0 8px; height:2px; background:linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-moz-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-ms-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-khtml-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-icab-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-o-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;"></div>
<br></center></div></div>
<div class="mw-body-content mw-content-ltr" lang="zh" dir="ltr"><div class="warningbox mw-warning-with-logexcerpt mw-content-ltr" dir="ltr" lang="zh"><center style="padding:1rem;padding-bottom:0"><div style="margin: 3px 0 8px; height:2px; background:linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-moz-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-ms-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-khtml-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-icab-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-o-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;"></div><big><font color="red">'''您已受警告'''</font></big></center><div style="margin: 3px 0 8px; height:2px; background:linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-moz-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-ms-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-khtml-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-icab-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-o-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(left, transparent 0%, #FF0000 50%, transparent 100%) repeat scroll 0 0 transparent;"></div><br></div></div>
<br>
}}}}

**警告**

警告内容
为您的人身安全着想，极不建议查看此文档。

**确认您的操作？**

**您已受警告**

代码示例 1-19

## **文末提示**

**本文主体由大道计划指挥官撰写，由大道计划成员、天堂侦探社成员进行了完善和补充，欢迎所有写手在此添加自己认为优秀的代码！**

**本文为更多的写手添加便利而开放编辑，任何写手不得删除、篡改此页面已有的内容，误删请于两小时内恢复原样，本代码教程面向全wiki写手，请勿故意使用故障代码，被发现者将被封号处理！**

**代码教程由撰写者原创，部分引用内容已在文中声明，未经允许严禁复制、引用或以任何方式抄袭本教程内容！**