你将构建： 一个单页落地站点，包含首屏、功能区和行动号召，并已在预发布网址上线
在本教程中，你将在画布上绘制一个落地页，用堆叠完成布局，让它在手机上也好看，然后发布。你只需要一个账户和一个空站点。
创建站点
新建一个空站点
在仪表盘上点击 New site，命名为
Landing。编辑器会打开首页，带有三个画板：桌面、平板和手机。熟悉界面
工具栏在顶部，图层和页面在左侧，检查器在右侧。按 H 或按住 Space 拖动即可平移；双指捏合或使用缩放菜单进行缩放。
绘制首屏（hero）
绘制框架
按 F 选择框架工具，在桌面画板顶部拖动。页面是一个垂直堆叠，所以框架会落入文档流中；横跨整个宽度拖动，它会得到
width: 100%。按住 ⇧ 画正方形，按住 ⌥ 从中心绘制，按住 ⌘ 关闭吸附，或按 Esc 取消。
把它变成堆叠
选中框架，在检查器中打开 Layout，将 Type 设为 Stack，Direction 设为 Vertical（向下箭头），Align 设为 Center。在同一分区中设置一些 Padding，让内容有呼吸空间。
添加标题和段落
按 T，在框架内拖动。文本工具会选中占位文字，直接输入你的标题即可。用同样的方法再添加一段文本作为副标题。
添加图片
按 I，在框架内拖动，然后在 Image 分区中选择一张图片，或从 Assets 标签页把文件拖到画布上。顺手写好替代文本（alt）。
在三个画板上，首屏都显示居中的标题、副标题和一张图片。
添加功能区
绘制这一行
在首屏下方绘制一个新框架，将 Layout → Type 设为 Stack，Direction 设为 Horizontal（向右箭头）。将 Distribute 设为 Space between。
制作一张卡片
在这一行内，为第一个功能绘制一个框架，放入标题和一段简短文字。
通过类设置样式
选中卡片，在检查器分区上方的类栏中输入
feature-card。点击新出现的feature-card标签（或在 Style target 菜单中选择 Class .feature-card），这样你的修改会作用于类，而不是这个图层。现在给它设置填充色和圆角。复制卡片
用 ⌘D 把卡片复制两次。副本共享同一个类，所以修改类会同时改变三张卡片的样式。
实现响应式
切换到手机断点
在工具栏中选择手机断点。此后的样式修改只写入手机断点，更大的断点保留原来的值。
让卡片纵向排列
选中功能区，将 Direction 设为 Vertical。查看手机画板：卡片纵向堆叠，而桌面上它们仍并排显示。
缩小标题
选中标题，在 Typography 中调小字号。覆盖标记会显示某个值来自哪个断点。
添加行动号召并发布
添加按钮
选中页面框架，然后在 Layers 标签页中点击 +（或在画布上右键），选择 Button。在 Button 分区的 Text 字段中输入按钮文字。
让它打开你的邮箱
打开按钮的 Link 分区。新按钮没有目标，所以 Target 显示 None。把它设为 URL，输入
mailto:加上你的邮箱地址，例如mailto:hello@example.com。按钮现在会渲染为一个样式像按钮的链接。预览
按 ⌘↵ 预览页面，链接和交互都会运行。再按一次回到编辑状态。
发布到预发布环境
点击工具栏中的 Publish，保持选中 Staging 并确认。打开预发布链接，就能看到你的页面已经上线。
你的落地页已在预发布地址上线，并能在平板和手机上自动重排。
你学到了什么
- 插入工具会把元素直接绘制到布局中，围绕元素绘制的框架会把它们包裹起来。
- 堆叠负责对齐和间距；只要给类而不是图层设置样式，类就能让重复的元素保持一致。
- 断点可以为小屏幕覆盖样式，而不影响桌面端。
- Link 分区可以让按钮或链接跳转到某个页面或 URL，无需工作流。
继续学习后面的教程，或阅读本教程背后的指南：