
预习
在深入学习本教程之前,让我们快速看一下这三个示例以及它们在不同屏幕尺寸下的外观。
例子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
预习
现在我们已经完成了所有步骤,让我们最后看一下不同屏幕尺寸的结果。