无法获取插入的页面 ":r-sandbox-cn.wikidot.com:theme:bep"，可能是站点缩写有误，或您无权在该站点查看此页面
本教材由B.E.P.出版，开放编辑（13.0到15.SP）但是禁止破坏，泄露题目答案
注：由于愚蠢的Wikidot自动复合的葚硎铧蚣䏻Rén xìng huà gōng néng， --会变为—，请注意修改
第十三章------“基础CSS制作（一）”——版式制作的基础
13.0——CSS的初步认识。
在5B第四章中，我们已经学过，在攥写层级文档的时候，会根据文档的主题，调用“版式”。
但是很多时候，因为一些需求，我们需要更改版式的内容或者重新自己做一个版式。
1、如何调用CSS
我们需要先把一个代码放在文档的开头：
[[module CSS]]
[[/module]]
然后，所有的版式制作，全部须在这两个代码中间书写，并且这两个代码必须单占一行
2、CSS语法习惯
几乎所有CSS代码和之前你们所学习的语法习惯完全不同——
所有CSS内部的单句代码必须以“;”(注意必须是英文的）结尾。
大部分CSS单句代码存在于”{”和“ }”中。
如果想要在CSS中添加注释，使用/*文字*/来添加注释。
13.0练习题（共3题）
1.以下不会导致单句代码无效的是（ ）
A：--dark-gray-monochrome: 0, 53, 145;
B：--dark-gray-monochrome: 0, 53, 145
C: —dark-gray-monochrome: 0, 53, 145；
D: —dark-gray-monochrome: 0, 53, 145：
2.小明做了一个简易CSS代码，却发现无法运行，就你所学，帮助他纠正错误。
[[module css]]
:root{
—header-title: "The Backrooms"；
—header-subtitle: "你走之后";
—logo-image: url(("http://backrooms-wikicn.wikidot.com/local--files/start/logo.svg");
/*made by xiaoming//
[[module/]]
纠正后的代码：
3、预习题（选做）：请试着将修好后小明的代码复制粘贴到沙盒站，你发现了什么？请尝试更改代码使其变成你想要的样式。
13.0练习答案
警告：请在写完练习之后再查阅题目答案，我们虽然没有设置监控或者权限，但是希望你们你可以诚信做题。
1.以下不会导致单句代码无效的是（ A ）
A：--dark-gray-monochrome: 0, 53, 145;
B：--dark-gray-monochrome: 0, 53, 145
C: —dark-gray-monochrome: 0, 53, 145；
D: —dark-gray-monochrome: 0, 53, 145：
2.小明做了一个简易CSS代码，却发现无法运行，就你所学，帮助他纠正错误。
[[module css]
:root{
—header-title: "The Backrooms"；
—header-subtitle: "你走之后";
—logo-image: url(("http://backrooms-wikicn.wikidot.com/local--files/start/logo.svg");
/*made by xiaoming//
[[module/]]
纠正后的代码：
[[module css]]
:root{
--header-title: "The Backrooms";
--header-subtitle: "你走之后";
--logo-image: url("http://backrooms-wiki-cn.wikidot.com/local--files/start/logo.svg");
}
[[/module]]3、预习题（选做）：请试着将修好后小明的代码复制粘贴到沙盒站，你发现了什么？请尝试更改代码使其变成你想要的样式。
13.1——ROOT(1)：版头标题与Logo的更改
事实上，版头与LOGO是在版式中最容易做出的，以上节课我们学习的代码知识为例：
[[module CSS]]
[[/module]]
当想要修改版头时，就在其中撰写上：
[[module CSS]]
:root{
—logo-image: url("看！这里支持png，svg，好像还支持gif！酷！");
—header-title: "版头文字";
—header-subtitle: "下一行的小字";
}
[[/module]]
首行必须撰写上“:root{”，请注意，有关版式的所有代码均需要使用英文形式，而在结尾，撰写上“}”（空一行），两个大括号间可不止能加这两行！还有，可以把图片的URL链接加进来。（在版头标题上/下一行添加）。
13.1——练习（共两题）
1.版头图片支持以下哪几种图片格式？（多选）（ ）
A.jpg
B.png
C.gif
D.wedp
E.svg
2.当版头标题文字那一行不填/被删除时，保存页面之后显示效果的标题将会显示什么？（ ）
A.什么也不显示
B.编辑网站的标题
C.乱码
13.1——练习答案
警告：请在写完练习之后再查阅题目答案，我们虽然没有设置监控或者权限，但是希望你们你可以诚信做题。
1.版头图片支持以下哪几种图片格式？（多选）（全选）
A.jpg
B.png
C.gif
D.wedp
E.svg
2.当版头标题文字那一行不填/被删除时，保存页面之后显示效果的标题将会显示（B）
A.什么也不显示
B.编辑网站的标题
C.乱码
13.2——ROOT(2)：基础色调更改（重点）
颜色是版式中不可少的一环，今天你们要来学习如何更改主色调。
本课内容代码同样在ROOT栏中进行。
本课是本单元的重点。
1、链接颜色。
—link-color: A,B,C;
这个是如何更改你没看过的链接的颜色，切记要将它放到root里,试着把A,B,C换成你的色码看看吧！（颜色的表现形式不可以为色号）
—hover-link-color: A,B,C;
这个是如何更改你的鼠标移到你没看过的链接时的颜色，切记要将它放到root里
—visited-link-color: A,B,C;
这个是如何更改你看过的链接的颜色，切记要将它放到root里
—newpage-color: A,B,C;
这个是如何更改不存在的链接的颜色，切记要将它放到root里
2、swatch
—swatch-background: A,B,C;
这个是如何更改编辑框的颜色，切记要将它放到root里。
—swatch-primary:A,B,C;
这个是如何更改当你的鼠标移到顶栏动画的颜色，切记要将它放到root里。
—swatch-primary-darker:A,B,C;
这个是如何更改文档末尾选项的颜色，切记要将它放到root里。
—swatch-primary-darkest:A,B,C;
本教材编写者暂未发现其作用
3、主题色（难点）
标准色：
—white-monochrome: 221,160,221;
这个可以使你的背景颜色，标题颜色以及下方、上方选项文字颜色更改，推荐使用较为淡的颜色。
白色:
—very-light-gray-monochrome: 221,160,221;
暂未发现其用途
次强调色:
—light-gray-monochrome: 217, 217, 217;
更改拖动条的颜色, 搜索二字, 用户名,编辑框外围
—gray-monochrome: 217, 217, 217;
更改顶栏颜色
—dark-gray-monochrome: 217,217,217;
更改鼠标移到顶栏,下方选项时显示颜色.
灰色
—black-monochrome: 217, 217, 217;
更改顶栏内部选项信息间隔颜色,文字颜色,搜索栏边框颜色
—medium-accent:217,217,217;
更改版头背景颜色,侧栏大标题颜色.
—dark-accent:217,217,217;
更改底部,底部选项颜色
—pale-gray-monochrome:11,45,14;
暂未发现其用途
—bright-accent:11,45,14;
更改鼠标移到顶栏选项的时候显示的颜色
13.2——练习
13.2——练习答案
13.3——侧边栏更改
第一种方法
本节课需要用到工具
http://scp-wiki-cn.wikidot.com/css-theme-preparation-tool
请同学们提前收藏好网站
本节课为自读课程
侧边栏更改
- 打开工具
- 选择"侧边栏"
- 根据指示自己填入色号,边框的位置,边框的形式.
- 点击预览检查错误
- 确认无误后,加载代码并复制除了默认代码和注释以外的代码.
注意事项
如果想要更改边框展现形式,可以参考制作工具上方的提示栏进行自学.
第二种方法
.open-menu {
background: rgb(0,0,0);/*背景颜色*/
color: rgb(0,0,0);/*文字颜色*/
}13.3——练习
13.3——练习答案
13.4——评分模块与TAB的更改
本节课需要用到工具
http://scp-wiki-cn.wikidot.com/css-theme-preparation-tool
请同学们提前收藏好网站
本节课为自读课程
评分模块更改
- 打开工具
- 选择"评分模块"
- 根据指示自己填入色号,边框的位置,边框的形式.
- 点击预览检查错误
- 确认无误后,加载代码并复制除了默认代码和注释以外的代码.
TAB更改
- 打开工具
- 选择"TAB"
- 根据指示自己填入色号,边框的位置,边框的形式.
- 点击预览检查错误
- 确认无误后,加载代码并复制除了默认代码和注释以外的代码.
注意事项
如果想要更改边框展现形式,可以参考制作工具上方的提示栏进行自学.
13.4——练习
13.4——练习答案
13.5——表格，图片，TOC，标题的更改
本节课需要用到工具
http://scp-wiki-cn.wikidot.com/css-theme-preparation-tool
请同学们提前收藏好网站
1.标题更改
- 打开工具
- 选择"标题"
- 根据指示自己填入色号,边框的位置,边框的形式.
- 点击预览检查错误
- 确认无误后,加载代码并复制除了默认代码和注释以外的代码.
2.标题更改扩展
若你想要让没一个标题都有不同颜色,可以选择在括号前的内容h1,h2,h3,h4,h5,h6改为你想设定的标题,h1代表一号标题,h2代表二号标题以此类推
3.图片模块更改
.scp-image-block .scp-image-caption {
background-color: rgb(255, 244, 88)/*背景颜色*/;
border: solid/*(边框样式)*/ 2px/*边框宽度*/ #FFA500/*边框颜色*/;
}
更改你想要的样式吧
4.表格更改
/*表格标题更改_背景_文字颜色*/
table.wiki-content-table th {
background-color: rgb(228, 178, 25);/*背景颜色*/
color: rgb(67,67,67);/*文字颜色*/
border: 2px dashed #B8860B;/*无用代码*/
}
/*表格内容更改_背景_文字颜色_边框*/
table.wiki-content-table td{
border: 2px dashed #B8860B;/*非标题表格的边框*/
background-color: rgb(255, 244, 88);/*背景颜色*/
}
/*全部表格更改_边框*/
table.wiki-content-table{
border: 2px dashed #B8860B;/*整个表格外边框设置*/
}
根据注释适当更改
5.TOC
#toc{
background:rgb(144, 113, 18);/*背景颜色*/
border: 0.4rem dashed rgb(240, 255, 102);/*边框设置*/
}
根据注释适当更改.
13.5——练习
13.5——练习答案
13.6——border,textshadow和boxshadow
我们在更换TAB,TOC等的样式时，是否看见很多：border之类的参数。虽然不用仔细地去调整也可以弄好 但是我们还是要注意一下，如何做出更优秀的版式。
1、总起
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
background: rgb(颜色);
color: rgb(颜色);
border: solid rgb(颜色);
}
仔细查看这段代码 我们可以发现 大括号中，存在三个参数，分别为：Background color border。
每个参数后的调整都很重要，比如border参数就可以调整边框。
2、border更改
border更改分为三栏
border: 宽度 样式 颜色
宽度
书写形式1
"px": px表示像素，这里可以写1px 2px一类来决定边框大小，px前的数越大，边框越粗。
书写形式2
"默认参数"：可以写入thin medium 或者thick 表示 细 中等 粗。
将第一栏填写好后 应为
border: 1px 样式 颜色
样式
"style"：本身就有很多很多默认的样式，填入可以实现不同效果
none（无） | hidden（隐藏） | dotted（点线） | dashed（虚线） | solid（实线） | double（双线） | groove（雕刻效果） | ridge（浮雕效果） | inset（陷入效果） | outset（突出效果）
将第二栏填好后，应为
border: 1px dashed 颜色;
颜色
可以通过#AAAAAA
rgb(a,b,c)
rgba(a,b,c,d)
三种表示。
将第三栏填好后，为：
border: 1px dashed #000000;
展示出就是细边框 虚线 黑色的边框；
2.1、border-left border-right border-top border-bottom
注意！本小节的四个参数不可与border并用
这四个参数，顾名思义，分别操控上下左右四个方向的边框，他们和border所具有的属性以及用法完全一致，这里不再赘述。
3、text-shadow 文字阴影
text-shadow:阴影颜色 横向偏移 竖向偏移 模糊效果
阴影颜色
与边框颜色输入同理
text-shadow: green ? ? ？？
横向偏移
此处同样要用到PX，此处写的便是npx,表示文字横向偏移了多远，正数为右，负数为左。
竖向偏移
此处同样要用到PX，此处写的便是npx,表示文字竖向偏移了多远，正数为下，负数为上。
text shadow: green 1px 1px ? ?
模糊效果
此处需在前两个px后，加入第三个px值，值越大，模糊半径越大，阴影也就越大越淡。
text-shadow: green 1px 1px 3px
显示为：这个东西里，文字阴影是绿色，背景有点模糊。
text-shadow不适用于每个大括号。请谨慎使用。
4、box-shadow，方框阴影。
其他设置与text-shadow相同，但可以使用inset。
inset:使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下
位置：box-shadow:inset white 1px 1px 3px;
13.6——练习
13.6——练习答案
单元小结
本单元,我们学会了在CSS中更改TAB 表格 图片等内容的参数.有了这些知识,我们可以开始写出初级的版式了!
第十四章------“基础CSS制作（二）”——做出更有特色的版式
14.0——引用块更改
1.首先，你需要知道引用块的代码是什么：
> 文本
效果是这样：
文本
而Wikidot语法中，>符号的原理是将文本包括在一个blockquote的元素内，缩进的引用块即为嵌套的blockquote元素。所以在CSS中，我们需要这么写：
blockquote {
/*此处为你想要的样式代码*/
}2.在阈限版式中，有一种div块，通过改变class类的方式来改变div样式，它的代码是这样的：
[[div class="blockquote"]]
[[/div]]
这种方式会把div块内的文本包括在一个class为blockquote的div内，所以在CSS里，我们需要加上：
div.blockquote {
/*代码*/
}上面2个code块里的的代码，可以用逗号分隔符来简写。
14.1——练习
14.1——练习答案
14.1——默认DIV更改
首先，我们要知道默认的div都有什么。
darkblock
lightblock
styled-quote
blockquote
dark-styled-block
以上这些就是全部的默认div
然后，我们还要知道div要怎么使用
[[div class="class，可以自定义也可以用已经有的"]]
文字
[[/div]]
那么，我们要如何更改默认div呢?
这里用暗色div来举例。
.darkblock {
background-color: rgb(255,255,255)
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .25);
color:rgb(245,245,245);
}
上面就是实例
相信你也知道了，background-color代表的是div的背景颜色，改变颜色要更改rgb()的内容，而color则是文字颜色。
其他的，上面已经讲了，这边就不再重复，请各位自行翻看。
14.1——练习
14.1——练习答案
14.2——自创DIV引入版式
使用如下代码来创建一个自创的DIV块：
.name/*自创DIV的名字*/ {
/*代码*/
}例如：
.example {
background: #000000;
color: #ffffff;
border: #ff0000;
}此时使用如下代码就可以创建自己的DIV块
[[div class="example"]] test text [[/div]]
test text
14.2——练习
14.2——练习答案
14.3——更改默认生存难度图标
14.3——练习
14.3——练习答案
14.4——自制生存难度（2）
14.4——练习
14.4——练习答案
14.5——如何寻找更高级的CSS代码
14.5——练习
14.5——练习答案
14.6——奇奇怪怪的杂项
这节课，我们将会学习一些杂项代码。
伪装脚注块
这里是做假的脚注块，请根据情况修改
.footnoteblock {
background:rgb(0,0,0);/*背景颜色*/
color:rgb(255,255,255);/*文字颜色*/
border-left:1em solid rgb(11,45,14);/*更改脚注块左侧竖块*/
display:block;/*形状更改*/
padding:1em 2em;/*未知，但必加*/
font-family:monospace,fangsong;/*字体(可选)*/
}就可以做出如下效果：
注释
- 主要还是因为英分的版式泰酷辣所以才做这个。
- 用[[div class="footnoteblock"]]可以做出这样的脚注块。
[[div class="footnoteblock"]] +++ 注释 ---- # 主要还是因为英分的版式泰酷辣所以才做这个。 # 用@@[[div class="footnoteblock"]]@@可以做出这样的脚注块。 [[/div]]
页面标签前缀块
.page-tags:before {
text-align: center;
content: '标签:';/*方块文字*/
background: white;/*方块背景色*/
border: 1px solid lightgrey;/*边框*/
height: 2em;/*高*/
width: 4em;/*宽*/
font-size: x-small;/*字体尺寸*/
display: block;/*方块形状*/
float: left;/*悬浮依靠方向*/
font-family: 'Fantasque Sans Mono';/*字体*/
box-shadow: 0 0 0.5rem #fff;/*方块阴影*/
}14.SP——活动课：版式成果分享
14.SP——练习
14.SP——R分达人榜
第十五章：List Page——实现自动化代码
15.1——迭代
本课不介绍原理。
什么是迭代
迭代（Offset）是在一个作品中插入多个不同“页面”以达到特定效果的写作手法。比如，你可以用迭代在一篇文章里塞入多篇文档，以对比项目在不同时间段的情况，又或是从不同的视角描述同一个项目。迭代也经常被当作一种实现剧情反转的手段。总之，合理使用迭代带来的观感是单个页面无法比拟的。
迭代通常涉及到页面跳转，如果你在一篇文章里点开了一个链接，发现跳转到的是同一个链接，但连接后面多了一串 /offset/数字，你点开的就是迭代页，并且这种迭代是用 Listpages 模块实现的，也是最常见的迭代。这种迭代的操作较为繁琐，并且有一定的门槛，虽然功能比本组件提供的单页迭代要多不少，灵活性也更高，但对于新人来说不是一个值得挑战的对象。
如何制作迭代
第一步：设置父页面
首先创建一个页面，名为sd:XXX
接下来往这个页面里塞入以下代码
[[module ListPages category="fragment" parent="." order="name" limit="1" offset="@URL|0"]]
%%content%%
[[/module]]
完成后，你会发现这个页面空无一物。，你也不能让现在的它有物。
第二步：设置子页面
接下来，把你需要迭代的第一个页面命名为”fragment:XXX-1“
这个页面里需要装你的故事的内容，你不需要加入除了你故事之外的别的代码。
并在页面下方选项里选择更多---》父页面
设置父页面为你刚刚建立的sd:XXX
现在再次点开sd:XXX的页面，你就可以看到你的第一个页面了
同理继续创建fragment:XXX-2
以及更多你想要的故事反转。
现在，再去sd:XXX，把网址后面加上/offset/N(N的数值>0并且<你创建的子页面数-1）
你就可以看到不同的子页面了。
第三步：子页面相连
要链到别的子页面，只需要把链接变为你要显示的子页面的网址就行了。
本页面附件里有迭代视频教程
15.2——更简单的迭代
本课作者不懂原理。
本节课需要用到工具
http://backrooms-wiki-cn.wikidot.com/layout-helpers
请同学们提前收藏好网站
首先，根据网站教程，我们需要引入该组件：
[[include :backrooms-wiki-cn:component:layout-helpers]]
接着，忽略教程中一大堆眼花缭乱并且十分实用、优秀的样式和代码，我们直接来到倒数第二个，进阶排版工具：CSS 单页迭代（CSS Offset）
这里就有教程，不过我们在这里复述一遍：
CSS 迭代与常规的 Listpages 迭代以及单页迭代不同，它更小巧，很容易上手，任何人都能用它来制作迭代。
要创建 CSS 迭代，你需要把每个页面的内容都用一个 DIV 装起来，为它们分别加上独一无二的 ID，并设置一个默认页面。注意要把默认的第一页放在最后，并且默认页不写 offset-page 类，只设置 ID 为 default-page，就像这样：
[[div class="offset-page" id="page-2"]] 我是页面 2 [[/div]] [[div class="offset-page" id="page-3"]] 我是页面 3 [[/div]] [[div id="default-page"]] 我是页面 1 [[/div]] ......
然后，通过这样的超链接跳转到各个页面（注意在你设置的 id 前加上 #u-）。
[#u-default-page 跳转到页面 1] [#u-page-2 跳转到页面 2] [#u-page-3 跳转到页面 3]
最后的效果如下（边框是特地加上的，正常使用时不会有边框）：