故事

一个（模块化、高度可调整的）响应式单页模板，由 HTML5 UP 并根据以下免费发布知识共享.

这是一个横幅元素，通常用作介绍或开场白。您可以定制它的具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

开始使用

聚光灯

这是一个 聚光灯 元素，正如其名称所暗示的那样，它通常用于突出特定的功能、主题或几乎任何东西。您可以定制它的具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

了解更多

聚光灯

这也是一个 聚光灯 元素，之所以放在这里是因为只有一个聚光灯的演示会显得有点空。与所有聚光灯一样，您可以定制它具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

了解更多

聚光灯

是的，这是另一个 聚光灯 元素，它也在这里，因为我需要填充一些空间。当然，像任何其他聚光灯一样，您可以自定义它具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

了解更多

画廊

这是一个画廊元素。它可以充当灯箱（当给定 lightbox 类），并且您可以自定义它的具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

项目

这是一个项目元素，它基本上只是一个用于组织各种类型项目的网格。您可以定制它的具有多种修饰符的外观，并为其分配一个可选的 onload 或 onscroll 过渡修饰符（详情).

一

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

两个

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

三

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

四

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

五

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

六

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

七

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

八

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

九

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

十

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

十一

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

十二

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。

附加元素

最后，这里有一些额外的元素供您参考可能发现有用（是的，它们看起来与任何外观).

文字

这是粗体这是强。这是 意大利语 这是强调。这是 ^上标文本，这是 _签名文本这是下划线的这是代码： for (;;) { ... }。最后，这是一个链接.

标题

标题级别 1

标题级别 2

标题级别 3

标题级别 4

标题级别 5

标题级别 6

带副标题的标题

展示品牌特色，传达服务价值。

从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。

带副标题的标题

展示品牌特色，传达服务价值。

从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。

带副标题的标题

展示品牌特色，传达服务价值。

从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。

无序列表

默认

展示品牌特色，传达服务价值。
有时我讨厌怀孕
载体并不完整
我不再像以前那样装饰我的喉咙
展示品牌特色，传达服务价值。
这只猫会让人头疼

交替地

展示品牌特色，传达服务价值。
有时我讨厌怀孕
载体并不完整
我不再像以前那样装饰我的喉咙
展示品牌特色，传达服务价值。
这只猫会让人头疼

有序列表

展示品牌特色，传达服务价值。
有时我讨厌怀孕
载体并不完整
我不再像以前那样装饰我的喉咙
展示品牌特色，传达服务价值。
这只猫会让人头疼

定义列表

有时我讨厌教练: 从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。
我不再像以前那样装饰我的喉咙: 从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。
这只猫会让人头疼: 从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。

块引用

从首屏展示到内容浏览，保持简洁自然的访问体验。页面支持手机、平板和电脑，可根据实际需求调整。

代码

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

图标

风格#1

风格#2

按钮

特别
默认

行动

默认

小号

垂直

立式+小号

垂直+贴合

立式+小号+合身

形式

表

默认

名称	描述	价格
还有 1	学校门前，全是卡车车队。	29.99
还有2	客户弧形卡车的动力和便利性。	19.99
还有 3	莫比的嘴角布满了弧度。	29.99
还有4	生活是一个完整的故事。	19.99
项目 5	学校门前，全是卡车车队。	29.99
		100.00

交替地

名称	描述	价格
还有 1	学校门前，全是卡车车队。	29.99
还有2	客户弧形卡车的动力和便利性。	19.99
还有 3	莫比的嘴角布满了弧度。	29.99
还有4	生活是一个完整的故事。	19.99
项目 5	学校门前，全是卡车车队。	29.99
		100.00

图片

完成了

左

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。图片、产品、评价和数字均为模板展示内容，上线前可按真实业务资料定制。

右

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。图片、产品、评价和数字均为模板展示内容，上线前可按真实业务资料定制。

盒子

精心呈现每一处细节，让品牌故事、产品特色与服务优势更清晰地传达给访客。图片、产品、评价和数字均为模板展示内容，上线前可按真实业务资料定制。

参考要素

哦，还有这个：对各种元素支持的所有修饰符的方便参考。

横幅

超文本标记语言

<section class="banner style(N) （可选修饰符）">
  <div class="content">
    （内容）
  </div>
  <div class="image">
    <img src="（图片网址）" alt="Alternate text" />
  </div>
</section>

`banner style1`

内容和图像之间按 50/50 垂直分割。支持这些修饰符：

`fullscreen`	填充屏幕的高度。

`orient-left`	左侧显示内容，右侧显示图像。
`orient-right`	右侧显示内容，左侧显示图像。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`banner style2`

盒装内容设置在图像背景下，并附加到屏幕的任一侧或居中。支持这些修饰符：

`fullscreen`	填充屏幕的高度。

`orient-left`	将内容框附加到屏幕的左边缘。
`orient-center`	将内容框放置在屏幕中央。
`orient-right`	将内容框附加到屏幕的右边缘。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`banner style3`

放置在内容一侧的圆形框架内的图像。支持这些修饰符：

`fullscreen`	填充屏幕的高度。

`orient-left`	将内容放在左侧，图像放在右侧。
`orient-right`	将内容放在右侧，图像放在左侧。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-up`	在页面加载时淡出图像。
`onload-image-fade-down`	在页面加载时淡入图像。
`onload-image-fade-left`	淡化页面加载时留下的图像。
`onload-image-fade-right`	在页面加载时淡化图像。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-up`	在页面滚动时使图像淡出。
`onscroll-image-fade-down`	在页面滚动时使图像向下淡出。
`onscroll-image-fade-left`	淡化页面滚动上留下的图像。
`onscroll-image-fade-right`	在页面滚动时淡化图像。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`banner style4`

放置在内容一侧的电话形状框架内的图像。支持这些修饰符：

`fullscreen`	填充屏幕的高度。

`iphone`	使用 iPhone 样式作为图像框架。
`android`	使用 Android 样式作为图像框架。

`orient-left`	将内容放在左侧，图像放在右侧。
`orient-right`	将内容放在右侧，图像放在左侧。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-up`	在页面加载时淡出图像。
`onload-image-fade-down`	在页面加载时淡入图像。
`onload-image-fade-left`	淡化页面加载时留下的图像。
`onload-image-fade-right`	在页面加载时淡化图像。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-up`	在页面滚动时使图像淡出。
`onscroll-image-fade-down`	在页面滚动时使图像向下淡出。
`onscroll-image-fade-left`	淡化页面滚动上留下的图像。
`onscroll-image-fade-right`	在页面滚动时淡化图像。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`banner style5`

直接针对图像背景设置的内容。支持这些修饰符：

`fullscreen`	填充屏幕的高度。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

聚光灯

超文本标记语言

<section class="spotlight style(N) （可选修饰符）">
  <div class="content">
    （内容）
  </div>
  <div class="image">
    <img src="（图片网址）" alt="Alternate text" />
  </div>
</section>

`spotlight style1`

内容和图像之间的 30/70（或 70/30，取决于方向）垂直分割。支持这些修饰符：

`orient-left`	左侧显示内容，右侧显示图像。
`orient-right`	右侧显示内容，左侧显示图像。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`spotlight style2`

放置在内容一侧的圆形框架内的图像。支持这些修饰符：

`orient-left`	将内容放在左侧，图像放在右侧。
`orient-right`	将内容放在右侧，图像放在左侧。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-up`	在页面加载时淡出图像。
`onload-image-fade-down`	在页面加载时淡入图像。
`onload-image-fade-left`	淡化页面加载时留下的图像。
`onload-image-fade-right`	在页面加载时淡化图像。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-up`	在页面滚动时使图像淡出。
`onscroll-image-fade-down`	在页面滚动时使图像向下淡出。
`onscroll-image-fade-left`	淡化页面滚动上留下的图像。
`onscroll-image-fade-right`	在页面滚动时淡化图像。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`spotlight style3`

放置在内容一侧的电话形状框架内的图像。支持这些修饰符：

`orient-left`	将内容放在左侧，图像放在右侧。
`orient-right`	将内容放在右侧，图像放在左侧。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-up`	在页面加载时淡出图像。
`onload-image-fade-down`	在页面加载时淡入图像。
`onload-image-fade-left`	淡化页面加载时留下的图像。
`onload-image-fade-right`	在页面加载时淡化图像。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-up`	在页面滚动时使图像淡出。
`onscroll-image-fade-down`	在页面滚动时使图像向下淡出。
`onscroll-image-fade-left`	淡化页面滚动上留下的图像。
`onscroll-image-fade-right`	在页面滚动时淡化图像。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`spotlight style4`

盒装内容设置在图像背景下，并附加到屏幕的任一侧或居中。支持这些修饰符：

`fullscreen`	填充屏幕的高度。
`halfscreen`	填充屏幕高度的一半。

`orient-left`	将内容框附加到屏幕的左边缘。
`orient-center`	将内容框放置在屏幕中央。
`orient-right`	将内容框附加到屏幕的右边缘。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

`spotlight style5`

针对图像背景设置的盒装内容。支持这些修饰符：

`fullscreen`	填充屏幕的高度。
`halfscreen`	填充屏幕高度的一半。

`orient-left`	将内容框放置在屏幕左侧。
`orient-center`	将内容框放置在屏幕中央。
`orient-right`	将内容框放置在屏幕右侧。

`content-align-left`	内容左对齐。
`content-align-center`	内容居中对齐。
`content-align-right`	右对齐内容。

`image-position-left`	左侧位置图像。
`image-position-center`	位于中心的图像。
`image-position-right`	正确位置图像。

`onload-content-fade-up`	在页面加载时淡出内容。
`onload-content-fade-down`	内容在页面加载时淡出。
`onload-content-fade-left`	淡化页面加载时留下的内容。
`onload-content-fade-right`	在页面加载时淡入淡出内容。
`onload-content-fade-in`	页面加载时内容淡入淡出。
`onload-image-fade-in`	页面加载时图像淡入淡出。

`onscroll-content-fade-up`	页面滚动时淡出内容。
`onscroll-content-fade-down`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-left`	淡化页面滚动上留下的内容。
`onscroll-content-fade-right`	在页面滚动时淡入淡出内容。
`onscroll-content-fade-in`	页面滚动时淡入内容。
`onscroll-image-fade-in`	页面滚动时淡入图像。

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。

画廊

超文本标记语言

<div class="gallery style(N) （可选修饰符）">
  <article>
    <a href="（完整图片网址）" class="image">
      <img src="（缩略图网址）" alt="Alternate text" />
    </a>
    <div class="caption">
      （标题）
    </div>
  </article>
  <article>
    <a href="（完整图片网址）" class="image">
      <img src="（缩略图网址）" alt="Alternate text" />
    </a>
    <div class="caption">
      （标题）
    </div>
  </article>
  <article>
    <a href="（完整图片网址）" class="image">
      <img src="（缩略图网址）" alt="Alternate text" />
    </a>
    <div class="caption">
      （标题）
    </div>
  </article>
  ...
</div>

`gallery style1`

带有可选灯箱支持的缩略图网格。支持这些修饰符：

`small`	使用小缩略图。
`medium`	使用中等缩略图。
`big`	使用大缩略图。

`lightbox`	启用灯箱行为。

`onload-fade-in`	页面加载时缩略图淡入淡出。

`onscroll-fade-in`	页面滚动时缩略图淡入淡出。

`gallery style2`

带有可选灯箱支持的缩略图轮播。支持这些修饰符：

`small`	使用小缩略图。
`medium`	使用中等缩略图。
`big`	使用大缩略图。

`lightbox`	启用灯箱行为。

`onload-fade-in`	页面加载时缩略图淡入淡出。

`onscroll-fade-in`	页面滚动时缩略图淡入淡出。

项目

超文本标记语言

<div class="items style(N) （尺寸修饰符） （可选修饰符）">
  <section>
    （内容）
  </section>
  <section>
    （内容）
  </section>
  <section>
    （内容）
  </section>
  <section>
    （内容）
  </section>
  ...
</div>

`items style1`

由边框分隔的项目网格。

`small`	使用小物品。
`medium`	使用中等物品。
`big`	使用大件物品。

`onload-fade-in`	页面加载时淡入项目。

`onscroll-fade-in`	页面滚动上的项目淡入淡出。

`items style2`

由边框分隔的项目的轮廓网格。

`small`	使用小物品。
`medium`	使用中等物品。
`big`	使用大件物品。

`onload-fade-in`	页面加载时淡入项目。

`onscroll-fade-in`	页面滚动上的项目淡入淡出。

`items style3`

无边界的项目网格。

`small`	使用小物品。
`medium`	使用中等物品。
`big`	使用大件物品。

`onload-fade-in`	页面加载时淡入项目。

`onscroll-fade-in`	页面滚动上的项目淡入淡出。

包装纸

超文本标记语言

<div class="wrapper （可选修饰符）">
  （内容）
</div>

修饰符

`invert`	反转配色方案。
`color1`	使用背景颜色#1。
`color2`	使用背景颜色#2。
`color3`	使用背景颜色#3。
`color4`	使用背景颜色#4。
`color5`	使用背景颜色#5。
`color6`	使用背景颜色#6。
`color7`	使用背景颜色#7。