点击W可返回到仪表板,并创建一个新的网站!
所以,你是新来的Webflow的,不是吗?让我们深入研究。

可视化网页设计指南

这种视觉指南将引导您完成重要的响应式网页设计概念,以及如何在视觉上实现它们的内部Webflow的。 

#1盒模型

了解网站结构

所有这些页面上的元素都是块内的其它块(又名“盒状模型”)。当拖动网页元素,你从一个块拖动它们拖放到另一个。这就是HTML工作!

超计划

75美元/月

适合有20个或更多员工的任何业务。 

  • 500GB存储
  • 1百万  浏览量
  • 20合作者
  • 50社交网络
  • 高级支持
你看到了什么
注意:  您将了解如何设计这样的事情与下面的概念。
是什么  阻止  它由
DIV块
DIV块

H2标题超计划

文本块 75美元/月

适合20以上雇员的企业。 

名单
  • 列表项
    500GB  存储
  • 列表项
    1百万  浏览量
  • 列表项
    20  合作者
  • 列表项
    50  社交网络
  • 列表项
    高级  支持

自己尝试一下

拖动这款...

所有未经限制的功能。都可以吃。(这是一个段落元素)

提示:  点击并拖动上面的段落元素,并将其放在合适的价格下。您还可以使用像复制和粘贴(Ctrl + C,Ctrl + V)的快捷键,同时拖动(按住ALT)复制和删除(删除键)。 
走进紫块...

超计划

75美元/月
信息:  这就是HTML和网状结构工程-元素下对方或对方的内部叠加。这是建立一个流体并响应网站的最佳方式。
#2布局元素

基本布局元素

通过点击在左上角的[+]图标元素添加到您的网站。下面是一些在网页设计的最基本结构元素的-部分,容器和列。 

A科占用,如果你把它添加到身体(一个网站的画布)浏览器窗口的宽度为100%。
这是伟大的一个网站的大水平段。

部分元素

Container是960px块集中在浏览器的中间。通常大多数的网站内容是一个容器,这样它的中心里面添加。容器通常添加到身体或部分元素。

容器元素

添加列是要建立一个独特的网站版面的最快方式。编辑你想在不同的设备上有多少列,只需点击齿轮图标的右上角访问元素的设置。

响应列
#3设计的CSS

你的造型元素

选择一个元素,并在合适的款式面板(画笔图标)添加类。在这个面板,您可以添加文字和图形样式像字体颜色,行高,渐变,边框,阴影等。可视化网页设计是比编码权更有趣?

按键设计实例
加入购物车➜
自己的风采吧
按钮文本➜
提示:  此按钮已经有一类“按钮”有一些基本的样式。选择按钮,并尝试添加渐变,边框,圆润的边角,内/外阴影,悬停状态的风格,和过渡悬停风格-全部使用样式面板。
你创造了什么
按钮文本➜
应用“按钮”类
按钮文本
提示:  在网页设计中,你可以一类适用于许多元素,使它们看起来是一样的。适用于你点击[+]在样式面板的顶部,键入“按钮”找到该类风格的链接上面的“按钮”类。 
表单设计实例

谢谢!

你摇滚我的袜子!

哎呀!同时提交表单出了错:(

自己的风采吧

谢谢!您提交的内容已收到!

哎呀!同时提交表单出了错:(

提示:  首先创建类的文本字段和按钮(应用相同的类两个字段)。然后改变边框样式,背景颜色和悬停和按下状态添加样式。不要忘了在样式“成功”状态的表单元素,在设置面板(齿轮图标的右上角)发现。 
例如印刷术

莱克伍德斯托特

莱克伍德,科罗拉多州的黑啤酒

传说粗壮诞生出的一个山男子和他最心爱的东西,在科罗拉多州莱克伍德市的美丽的婚姻。山上的人也爱他的斧头和他的单杆步枪雷明顿,但并不像他爱他的城市。他梦见她flowy河流和山脉雄伟的。于是,他她的名字命名他最大的粗壮。因此,光荣是粗壮了生产经历的一座大山把人的心脏中。

“我制作的这个光荣的啤酒,以表达我永恒的爱为我美丽的城市。”

- 山人

自己的风采吧

莱克伍德斯托特

莱克伍德,科罗拉多州的黑啤酒

传说粗壮诞生出的一个山男子和他最心爱的东西,在科罗拉多州莱克伍德市的美丽的婚姻。山上的人也爱他的斧头和他的单杆步枪雷明顿,但并不像他爱他的城市。他梦见她flowy河流和山脉雄伟的。于是,他她的名字命名他最大的粗壮。因此,光荣是粗壮了生产经历的一座大山把人的心脏中。

“我制作的这个光荣的啤酒,以表达我永恒的爱为我美丽的城市。”

- 山人

提示:  来吧,添加自定义版式和样式的背景。酷提示:如果您添加的排版样式父块,其所有子文本元素将继承这些文本样式。在CSS这种行为被称为“级联”。 
#4布局与CSS

构建网络布局与CSS

类似于添加的风格元素,改变一个元素的位置先添加一个类,然后编辑的位置属性。您将了解的margin,padding,显示器,浮动,溢出和位置。 

保证金和填充的例子
爆炸新闻

联邦探员突袭Gunshop,寻找武器

店老板史蒂夫Witmere先前涉嫌黑市交易火箭筒。承认自己卷入俄罗斯黑手党。

其中在gunshop发现众多火箭炮是数以万计的价值至少万美元非法获得的画作。那是一个沉重的代价,这些哑画作。

说明:  margin和padding可以在样式面板的位置面板中找到。加入余量将增加空间的块之外,并加入填充将增加一个块的内部空间。
添加自己间距
爆炸新闻

联邦探员突袭Gunshop,寻找武器

店老板史蒂夫Witmere先前涉嫌黑市交易火箭筒。承认自己卷入俄罗斯黑手党。

其中在gunshop发现众多火箭炮是数以万计的价值至少万美元非法获得的画作。那是一个沉重的代价,这些哑画作。

TIP:  首先在主灰块(父元素)的四面八方添加填充。然后加入下边距个别文字元素(子元素)之间添加间距。提示:在使用保证金/填充控制适用于所有的侧面和ALT同样适用于相反侧按住SHIFT。
“显示:块”的例子

这个标题设置为display:block

本款被设置为display:block。使其充满父窗口的宽度和堆叠在其它块的顶部。 

按钮显示:块与显示按钮:阻止该链接被设置为display:block 此链接设置为display:block
说明:  设置元素的显示设置,以阻止将让他们在彼此顶部堆叠并填写100%其父块的宽度。大多数元素实际上在默认情况下此设置。 
让他们“显示:块”自己
这是一个按钮这是一个按钮链接是显示:内联默认链接都显示:内联默认
提示:  选择这些元素(有些是直插块,有些是内联),并使其显示:块,使他们对彼此顶部堆叠。 
“显示:inline-block的”的例子
说明:  设置元素的显示设置为inline-block的会使块的宽度顺应它里面的内容的宽度。这意味着,如果它们的含量足够小它们可以堆叠彼此相邻。您可以复制粘贴上面的按钮和编辑中的文本,看看它是如何工作的。
让他们inline-block的自己
下载编辑
提示:  所以他们下一个堆栈彼此inline-block的:选择上面的元素,让他们显示。你会看到图像堆栈旁边的按钮。提示:删除按钮和图像转换成单独的事业部块将让他们在彼此的顶部堆叠(因为股利块是显示:在默认情况下阻止)。
例如浮动

加入我们的最新资讯

谢谢!您提交的内容已收到!

哎呀!同时提交表单出了错:(

说明:  设置显示:inline-block的或浮动(本例中)是并排堆放一边元素最常见的方式。在这个例子中,我会告诉你如何漂浮的东西。 
自己浮起来

加入我们的最新资讯

谢谢!您提交的内容已收到!

哎呀!同时提交表单出了错:(

提示:  首先选择的文本字段,让它浮动:左,并给它一个宽度的百分比(例如:60%)。然后设置按钮浮动:左,以及和其他设置宽度的百分比(例如:40%),因此它们都加起来为100%。这是一个人工的方式来强迫任何元素并排堆放一边。 
绝对位置示例

我的乔杯

这是一个照片的标题文字。

说明:  如果你在一个元素上设定位置为绝对,你就可以在其母公司块内的任意位置来定位。选择哪个父里面定位,设置父元素的位置,以相对的。注意:当元素是绝对定位的,他们漂浮在其他元素。
样式自己动手

我的乔杯

这是一个照片的标题是我最喜欢的一杯咖啡。

提示:  首先选择图像包装元素,并设置其位置为相对。接下来选择标题,将其拖动到图像设置它的位置,以绝对和选择预设的7号。要定位精选徽章到正确的位置选择第二预设和手动定位。
#5  级联样式

利用层叠样式

可以通过在彼此的顶部添加额外的类和在这些类中添加不同的样式容易地创建一个元素的变体。看看下面,我们有一个按钮的不同变化的例子。 

分享按钮样式的例子
普通按钮
绿色按钮
红色按钮
普通按钮
自己设计的按钮
绿色按钮
红色按钮
提示:  选择第二个按钮,然后点击[+]旁边的类中添加其他类。你可以称之为“绿色”。然后给它不同的风格。这些样式将覆盖基本样式一流的。然后创建红色按钮。 
#6媒体查询

设计为不同的设备

在Webflow的第一次设计你的网站的桌面设备,然后让移动设备(接入设备图标,在最上面一栏)的变化。添加样式在移动装置将覆盖桌面样式。 

响应例如标题

这是获取移动设备较小的一些标题文字。

说明:  此标题是在桌面上真正的大,但我们希望它是在移动设备较小。点击在顶栏的设备看到,文本大小和行高降低。
修复它自己

让这个大标题文本变得越来越小的移动设备。

提示:  选择此标题的平板设备上,使字体大小和行高度。做同样的电话景观和电话设备的肖像。你可以看到, 
响应按钮的例子
按钮文本
说明:  此按钮,就是要在小屏幕桌面,因为它很容易用鼠标点击光标。我们做了它更大的移动设备上,这样更容易挖掘用手指
按钮文本
修复它自己
提示:  进入到平板设备,并增加了按钮的填充。当你这样做,它会覆盖以前的风格在桌面上设置,并逐级下到下面的平板的所有设备。 
响应例如列

第1栏

这是一个div块里面的一些文字。

第2栏

这是一个div块里面的一些文字。

第3栏

这是一个div块里面的一些文字。
说明:  列元素Webflow的,可定制的每个设备。通过默认列堆叠彼此相邻的桌面和堆叠在彼此的顶部上的移动设备。 

第1栏

这是一个div块里面的一些文字。

第2栏

这是一个div块里面的一些文字。

第3栏

这是一个div块里面的一些文字。
修复它自己
提示:  选择一列或行元素以上(你也可以使用底部的痕迹导航栏或导航器面板右侧找到它),进入元素的设置(齿轮图标右上角),并确保列堆叠在移动设备上。
#7资源

需要更多的帮助?

你说对了!有成千上万的人学习Webflow的和网页设计的每一天。一个伟大的地方,开始是视频教程。然后头部到支持中心或社区论坛。 

(您可以点击上面的链接通过进入预览模式- 在左上角的眼睛图标)