前言
窝觉得你会需要这个教程是的。
这篇文章是我Dr Hormress多次使用Div方块进行业余文章排版之后总结出的经验,涉及到简单的CSS和简单的维基语法;这篇文章的主要内容是“项目编号”即SCP格式资源中“代替标题格式”的简易布局。
你可以在这个沙盒页面找到一些CSS参考。
第零步:写一篇SCP
(不,其实你不一定需要先写好一篇完整的文档。其实有了美观养眼的排版元素之后你可能会更有写作的动力。)
一篇SCP文档的普通开头就是像下面这样的两项1:
项目编号:SCP-CN-001
项目等级:Asura
这块东西也是最经常被魔改的排版元素。我们可以先把能够加加减减的东西列出来:
- 项目编号
- 项目等级
- 机密等级
- 扰动等级
- 风险等级
后面两条经常显得累赘,此处先不讨论。
第一步:加点新东西
简单地加入机密等级部分
你有时候会看到这样的模式:
项目编号:SCP-CN-001
项目等级:Asura
6/4056级机密
另外一些时候,你会看到那个“机密”在“项目编号”的右边。实现这种效果的方法有很多,我们将采取效果较好的方法。
首先,为了更方便控制文本的位置,你可以使用表格或div方块把文本框进去。事实上,div方块通常拥有比表格好得多的显示效果(表格有它的默认边距)。
像你在一些文章中看到的那样,我们最好把“机密等级”这一部分分成两行。
示例:
[[div class="in-a"]]
**项目编号:**SCP-CN-001
**项目等级:**Asura
[[div class="in-b"]]
6/4056**级**
**机密**
[[/div]]
[[/div]]
项目编号:SCP-CN-001
项目等级:Asura
6/4056级
机密
显示出来的东西看起来没有太大不同,Div方块的class暂时也没有实际用途;当然,把内容包裹在Div里面的目的就是调整内容位置。
接着写入:
[[module CSS]] .in-a { position: relative; width: 100%; } .in-b { position: absolute; top: 0; right: 0; } [[/module]]
这些CSS的功能:
- position属性定义一个Div方块的定位模式,不专门定义时默认为static。当position的值为absolute时,这个Div方块使用绝对定位,它将以最低一个position属性不为static的父元素为基准调整定位,并与其他元素互不干扰。当position的值为relative时,Div方块采用相对定位,直接这样设置不会有可见变化。
- 简单来说,套在relative方块里的absolute方块能根据top、right、bottom、left(上、右、下、左,这四个属性只需要写两个)四个属性被随意放在方块的任何地方。当然,直接应用现在的CSS会导致神奇的效果。
- 简单来说,套在relative方块里的absolute方块能根据top、right、bottom、left(上、右、下、左,这四个属性只需要写两个)四个属性被随意放在方块的任何地方。当然,直接应用现在的CSS会导致神奇的效果。
- width设置了外层Div的宽度填充。
- 如同上面解释的,top: 0和right: 0两个属性会让Div方块被放在右上方。
这样设置之后Div方块会是这样子的:
项目编号:SCP-CN-001
项目等级:Asura
6/4056级
机密
你会发现右边的部分很怪,它有偏移,而且我们习惯的文字是右对齐。
去除p元素偏移
是的,你看到的所有偏移都是“p元素”造成的。
p元素在html里就是你在wikidot上看到的段落。不是单纯的换行,而是回车两次形成的段落。这样的段落间距会比拿@@@@空一行形成的间距小一些——这其实就是p元素的偏移(margin属性)。
我们可以用如下代码分别去除Div内部第一个p元素的上边距和最后一个p元素的下边距,这使得Div的内容不再偏移且保证了显示正常:
[[module CSS]] .in-a p:nth-child(1) { margin-top: 0; } .in-a p:nth-last-child(1) { margin-bottom: 0; } [[/module]]
(示例调整的是class="in-a"方块内的p元素。)
如果你加上这些代码,效果将如下显示:
项目编号:SCP-CN-001
项目等级:Asura
6/4056级
机密
接着加一个置右:
[[module CSS]] .in-b { text-align: right; } [[/module]]
项目编号:SCP-CN-001
项目等级:Asura
6/4056级
机密
大功告成!
此时,如果你把这个模块放在文章里,你会发现它完美地对齐了下方的文本;显然,这种效果令人愉快。
下方是整个实例的全部代码,你可以直接复制到你的文章中使用:
[[div class="in-a"]] **项目编号:**SCP-CN-001 **项目等级:**Asura [[div class="in-b"]] 6/4056**级** **机密** [[/div]] [[/div]] [!-- 下方为CSS模块,建议置于文章最后。 --] [[module CSS]] .in-a { position: relative; width: 100%; } .in-b { position: absolute; top: 0; right: 0; } .in-a p:nth-child(1) { margin-top: 0; } .in-a p:nth-last-child(1) { margin-bottom: 0; } .in-b { text-align: right; } [[/module]]