预习
在深入学习本教程之前，让我们快速看一下将逐步重新创建的三个示例。这些示例仅显示在移动设备（如果愿意，可以在平板电脑上）中显示。
重新创建示例1
将新部分添加到页面底部
让我们开始重新创建第一个固定的移动页脚栏！我们建议为Health Clinic Layout Pack中包含的三个布局创建一个页面。每个示例一个。打开要添加第一个页脚栏的页面。向下滚动到页面末尾，然后在最后一个部分之后添加一个新部分。
间距
打开行设置，并删除间距设置中的所有自定义顶部和底部填充。
- 最高填充：0px
- 底部填充：0px
能见度
我们也将这一部分隐藏在桌面上。如果您希望移动页脚栏仅出现在移动设备上，请继续并在平板电脑上隐藏该部分。
添加新行
列结构
继续使用以下列结构向该部分添加新行：
浆纱
尚未添加任何模块，请打开行设置并修改大小设置。
- 将此行设为全角：是
- 使用自定义装订线宽度：是
- 装订线宽度：1
- 均衡柱高：是
间距
接下来，删除该行的所有默认顶部和底部填充。
- 最高填充：0px
- 底部填充：0px
自定义CSS
最后，我们向该行添加一些自定义CSS行。这些行将帮助将行变成固定的页脚栏。
|
01
02
03
04
|
display: flex;position:fixed;bottom: 0px;z-index: 99; |
将文本模块添加到列1
添加内容
是时候开始添加模块了！我们需要的第一个模块是第1列中的文本模块。添加一些选择的内容。
背景颜色
转到模块的背景设置，然后更改背景颜色。
- 背景颜色：＃5e89fb
文字设定
也修改文本设置。
- 文字字型：Work Sans
- 文字字体粗细
- 文字颜色：#ffffff
- 文字大小：16px
- 文字字母间距：-1px
间距
接下来添加一些自定义填充值。
- 最高填充：16px
- 底部填充：16px
- 左填充：15px
- 右填充：15px
边境
还有一些圆角。
- 左上方：10px
- 右上方：10px
框影
通过添加一个微妙的阴影框来完成模块的设置。
- 框影模糊强度：80px
将Blurb模块添加到列2
添加内容
将Blurb模块添加到第二列，并添加标题。
选择图标
选择“模糊”模块的图标继续。
背景颜色
也为模块添加背景色。
- 背景颜色：＃62de9d
图标设置
移至设计选项卡并更改图标设置。
- 图标颜色：#ffffff
- 图标位置：左
- 使用图标字体大小：是
- 图标字体大小：19px
标题文字设定
继续修改标题文本设置。
- 标题字体：Work Sans
- 标题文字颜色：#ffffff
- 标题文字大小：16px
- 标题字母间距：-1px
间距
也向模块添加一些自定义填充。
- 最高填充：20px
- 底边填充：10px
- 左填充：30px
- 右填充：30px
边境
并在左上角和右上角添加“ 10px”。
- 左上方：10px
- 右上方：10px
框影
最后但并非最不重要的一点是，在模块中添加一个微妙的阴影。
- 框影模糊强度：80px
