
预习
在深入学习本教程之前,让我们快速看一下将逐步重新创建的三个示例。这些示例仅显示在移动设备(如果愿意,可以在平板电脑上)中显示。
重新创建示例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