这些类别可在整个网站上重复使用,并允许您在构建网站时保持井然有序。
总之:
- HTML 是页面的组成部分
- CSS 是该组件的布局
恭喜,您现在对网站的构建方式已经有了大致的了解。
与设计师一起建造
学习 Webflow 的最佳方法是实际在 Webflow 上进行构建。要充分利用本指南,请按照以下步骤操作。
创建空白项目
在这里您可以找到创建强大网站所需的一切。在左侧,您将看到添加和编辑组件所需的一切,在右侧,您将看到设计这些组件所需的一切。
在 Webflow 中,设计器左侧的前 3 个按钮是用于 HTML 元素的按钮。
第一个是“添加项目”面板
您可以在此处添加 div、按钮、文本、图像、表单等组件。
第二个是您可以添加和管理符号的地方。您可 手机号码数据 以预先保存这些部分并在多个页面上重复使用,例如导航栏或页脚。
第三个是导航器,您可以在其中看到组件的层次结构和结构。
在画布上放置任何元素之前,让我们先确定正文(我们正在构建的主页面)的字体类型和字体大小。
首先在导航器中选择“ Body ”。接下来,转到样式面板(右侧)并选择“ Body(所有页面)”类。我们在本课程中所做的任何样式编辑都可以在我们网站的其他页面上重复使用。
例如,如果我们想为所有页面添加主要 手机号码 背景颜色,我们可以在这里进行。在这种情况下,我们将保留默认的白色。
我们要通过进入
“排版”并从列表中选择一种字体来设置我们的基本字体和大小。您还可以在项目设置中添加自定义字体,该字体将反映在下拉菜单中。
我们选择了Verdana字体,现在我们要 dan cobley:物理学教会我营销的道理 选择基本字体大小。 16px是字体大小的标准,高度加上“1.4-”就可以保证字体高度是字体大小的1.4倍。
好的,让我们添加一些元素。我们将首先添加一个预先设计的导航栏。
接下来,在其下方,我们将为主要部分添加一个部分 div。一旦我们将 Section div 放到位,我们就可以向其添加一个类并将其命名为“ Main Section ”,这样我们就可以保持井然有序,并在导航器中整齐地看到所有元素。
现在我们可以对导航栏进行
一些样式更改,首先将背景颜色设为与主体相同的颜色。
只需选择浏览器中的导航栏,然后在样式面板中更改背景颜色。
现在添加一个徽标。确保将您的徽标保存为 PNG 或 SVG,并将其上传到 Webflow 项目中的资产管理器。从那里,您可以将图标资产拖放到画布上。