预习
在深入学习本教程之前，让我们快速看一下这三个示例以及它们在不同屏幕尺寸下的外观。
例子1
范例＃2
例子＃3
添加锚链接
将锚点链接1添加到部分
我们要开始的第一件事是锚点ID。我们将重新创建的固定图标导航栏将包含4个不同的图标。这意味着您必须将每个图标链接到页面的不同部分。您可以将锚点ID添加到任何类型的设计元素中，但它最常用于部分。使用登录页面创建一个新页面，并将第一个锚链接添加到页面上的一个部分。
- CSS编号：fixed-icon-navigation-1
将锚点链接2添加到部分
将另一个锚点ID添加到第二部分。
- CSS编号：fixed-icon-navigation-2
将锚点链接3添加到部分
对第三个锚ID重复相同的步骤。
- CSS编号：fixed-icon-navigation-3
将锚点链接4添加到部分
并将锚点ID也添加到第四部分和最后一部分。在本教程的后面，我们将这些ID链接到放置在固定图标导航栏中的图标。
- CSS编号：fixed-icon-navigation-4
开始重新创建示例＃1
将新行添加到页面的最后一部分
列结构
让我们开始重新创建第一个示例！向下滚动到页面底部，并使用以下列结构在最后一节中添加新行：
背景颜色
尚未添加任何模块，请打开行设置并将背景色添加到该行。
- 背景颜色：#ffffff
对准
然后，更改行对齐方式。
- 行对齐：左
浆纱
也修改行的大小设置。
- 使用自定义宽度：是
- 单位：％
- 自订宽度：4％
- 使用自定义装订线宽度：是
- 装订线宽度：1
间距
并为较小的屏幕尺寸添加一些自定义填充。
- 左填充：2vw（仅限平板电脑和手机）
- 右填充：7vw（仅限平板电脑和手机）
边境
我们还在边框设置中使用了一些圆角。
- 右上方：10px
- 右下：10px
框影
带有细微的阴影，可以帮助我们创造一些深度。
- 框影模糊强度：80px
- 阴影颜色：rgba（0,0,0,0.3）
自定义CSS
最后但并非最不重要的一点是，我们将通过在行的高级选项卡中添加一些自定义CSS代码行来固定图标导航。
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 33%;bottom: 33%;z-index: 9999; |
将Blurb模块添加到列1
选择图标
既然我们已经完成了行设置的修改，就可以开始添加模块了。添加一个模糊模块，然后选择一个图标。
图标设置
然后，转到“设计”选项卡并修改图标设置。
- 图标颜色：＃000000
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：2vw（桌面），4vw（平板电脑），5vw（电话）
克隆Blurb模块3次
克隆您添加了三次的Blurb模块。
更改图标
并更改每个重复项的图标。
分别将锚链接添加到Blurb模块
最后但并非最不重要的一点是，您需要将锚URL分别添加到每个Blurb模块中。确保将每个图标链接到正确的部分ID。
- 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1
开始重新创建示例2
将新行添加到页面的最后一部分
列结构
继续第二个例子！使用以下列结构在页面的最后部分添加新行：
对准
尚未添加任何模块，请打开行设置并更改行对齐方式。
- 行对齐：左
浆纱
也修改大小设置。
- 使用自定义宽度：是
- 单位：％
- 自订宽度：6％
- 使用自定义装订线宽度：是
- 装订线宽度：1
间距
并为较小的屏幕尺寸添加一些自定义填充值。
- 左填充：2vw（仅限平板电脑和手机）
- 右填充：10vw（平板电脑），15.5vw（电话）
自定义CSS
最后但并非最不重要的一点是，在该行的高级选项卡中添加自定义CSS代码，以固定图标导航。
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 10%;bottom: 10%;z-index: 9999; |
将Blurb模块添加到列1
选择图标
继续向行的列添加Blurb Module，然后选择所需的图标。
图标设置
然后，转到设计选项卡，并对图标设置中的图标外观进行一些更改。
- 图标颜色：＃000000
- 圆圈图标：是
- 圆形颜色：rgba（0,0,0,0.14）
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：1.5vw（桌面），3vw（平板电脑），2.5vw（电话）
克隆Blurb模块3次
修改完第一个Blurb模块后，就可以继续克隆该模块3次。
更改图标
确保更改用于每个重复项的图标。
分别将锚链接添加到Blurb模块
然后，再次将每个Blurb模块链接到正确的锚点链接。
- 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1
开始重新创建示例＃3
将新行添加到页面的最后一部分
列结构
转到下一个和最后一个示例！使用以下列结构在页面的最后部分添加新行：
渐变背景
尚未添加任何模块，请打开行设置并添加渐变背景。
- 颜色1：＃ffb337
- 颜色2：＃1b52d9
对准
通过在设计选项卡中更改行对齐来继续。
- 行对齐：左
浆纱
然后，修改尺寸设置。
- 使用自定义宽度：是
- 单位：％
- 自订宽度：4％
- 使用自定义装订线宽度：是
- 装订线宽度：1
间距
也为较小的屏幕尺寸添加一些自定义填充值。
- 左填充：2vw（平板电脑），1vw（电话）
- 右填充：7vw（平板电脑），5.5vw（电话）
边境
并在行中添加左边框。
- 左边框宽度：3px
- 左边框颜色：#ffffff
框影
我们还添加了一个微妙的框阴影以在页面上创建深度。
- 框影模糊强度：80px
- 阴影颜色：rgba（0,0,0,0.3）
自定义CSS
最后但并非最不重要的一点是，将以下CSS代码行添加到行设置的“高级”标签中。这将有助于固定图标导航栏。
|
01
02
03
04
05
|
position:fixed;left: 0px;top: 62%;bottom: 10%;z-index: 9999; |
将Blurb模块添加到列1
选择图标
通过将第一个Blurb Module添加到该行的列，然后选择一个图标来继续。
图标设置
然后，转到“设计”选项卡并更改图标设置。
- 图标颜色：#ffffff
- 图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：1.5vw（台式机），4vw（平板电脑和手机）
克隆Blurb模块3次
克隆Blurb模块3次。
更改图标
并确保您更改每个重复项的图标。
分别将锚链接添加到Blurb模块
最后但并非最不重要的一点是，将锚URL分别添加到每个Blurb模块中，您就完成了！
- 模块链接URL：https://www.yourwebsite.com/yourpage/#fixed-icon-navigation-1
预习
现在我们已经完成了所有步骤，让我们最后看一下不同屏幕尺寸的结果。
例子1
范例＃2
例子＃3
