[[div]]方块与你
— 简明Wikidot语法指南
※文中将<div>盒元素及其在Wikidot语法中的变体称为[[div]]方块。这是个人习惯问题,正式上按盒子/元素/容器称呼即可,毕竟此类元素不一定是个方块。
如果你在这个维基上待过一段时间,你一定会注意到如《SCP格式资源》、《专业级Wikidot语法》、《你与高级格式》等文章提供的高级排版要素——[[div]]方块。多数情况下,它们的显示效果类似文字处理软件里的“文本框”,本篇文章将提供自定义这些方块的语法帮助。
前排提示
在使用[[div]]方块排版文章时,请务必避免如下情况:
- 为无需多个容器横排排列的[[div]]方块设置width属性。如这个页面那样,定义了宽度后的容器多半会在移动端窄屏上溢出,导致页面可以左右滑动。
- 使用float: center;或在非必要的情况下使用其他任何float属性。浮动元素的适应性会非常令人抓狂,而float: center;这行代码是毫无作用的。
基础语法
以如下这段代码为例:
[[div id="u-blockquote" class="blockquote" style="border: solid 1px #000; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);"]]
此处应有内容
[[/div]]
使用不同颜色标出的各部分介绍如下:
[[div id="ID" class="类" style="样式"]]
此处应有内容
[[/div]]
上述语法中形如xx="xx"的部分均为可选项。ID和类均用于指定某一个或某一组特定的[[div]]方块;样式(称之为内联样式)定义[[div]]方块的外观。
方块的样式
想为[[div]]方块赋予样式制作出好看的框框需要使用CSS语法。
关于CSS语法结构和使用CSS改变页面布局的技术细节请参阅这篇指导,在此仅作简述:
选择器 { 属性: 值; 属性: 值; 属性: 值; }
选择器 {属性: 值; 属性: 值; 属性: 值;}
选择器用以选择指定的元素,属性&值用以具体设置元素的样式。而由于[[div]]方块的样式直接写在[[div]]语法之内,它指定的自然是这一[[div]]方块,因此并不需要指定选择器与大括号:
[[div style="属性: 值; 属性: 值; 属性: 值;"]]
此处应有内容
[[/div]]
以下将提供一些文章排版过程中常用的样式指导。关于更多CSS选择器、属性的信息可以参考上面提到的那篇指导,或前往w3school、菜鸟教程、MDN等网站自行学习。
文本样式
直接在[[div]]方块内联样式中写入的一些属性可以改变整个[[div]]方块内的字体大小、颜色、样式、对齐方式等。