用Div方块排版文档:项目编号
评分: 0+x

前言

窝觉得你会需要这个教程是的。

这篇文章是我Dr HormressDr 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会导致神奇的效果。
  • 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]]

第二步:用函数绘制图标

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License