＃1盒模型

在.... 中越台

省錢站--拖帶,購物,搭車

超計劃

10美元/月

適合20以上僱員的企業。

500GB存儲
1百萬 瀏覽量
20合作者
50社交網絡
高級技術支持

你看到了什麼

注意： 您將了解如何設計這樣的事情與下面的概念。

是什麼阻止它由

DIV座

H2標題超計劃

文本塊 75美元/月

款適合20以上僱員的企業。

名單

列表項
500GB 存儲
列表項
1百萬 瀏覽量
列表項
20 合作者
列表項
50 社交網絡
列表項
高級技術支持

自己嘗試一下

拖動這款...

所有未經限制的功能。你可以吃。（這是一個段落元素）

提示： 點擊並拖動上面的段落元素，並將其放在合適的價格下。你還可以用像複製和粘貼（Ctrl + C，Ctrl + V）的快捷鍵，同時拖動（按住ALT）複製和刪除（刪除鍵）。

走進紫塊...

超計劃

75美元/月

INFO： 這是怎麼HTML和Web結構工程-元素下對方或對方的內部堆棧。這是建立一個流體並響應網站的最佳方式。

＃2佈局元素

基本佈局元素

通過點擊在左上角的[+]圖標添加元素到您的網站。下面是一些在網頁設計的最基本結構要素 - 部分，容器和列。

一組佔用，如果你把它添加到機構（一個網站的畫布）瀏覽器窗口的寬度為100％。
這是偉大的一個網站的大水平段。

部分元素

Container是一個960px塊集中在瀏覽器的中間。通常大多數的網站內容是一個容器，這樣它的中心裡面添加。容器通常添加到身體或部分元素。

容器元素

添加列是建立一個獨特的網站版面的最快方法。編輯要在不同的設備上有多少列，只需點擊齒輪圖標的右上角訪問元素的設置。

響應列

＃3設計與CSS

你的造型元素

選擇一個元素，並在合適的款式面板（畫筆圖標）添加一個類。在這個面板中，您可以添加文字和圖形樣式一樣的字體顏色，行高，漸變，邊框，陰影等。可視化網頁設計是比編碼權更多的樂趣？

按鍵設計實例

加入購物車➜

自己的風采吧

按鈕文本➜

提示： 此按鈕已經有一類“按鈕”的一些基本款式。選擇按鈕，並嘗試添加漸變，邊框，圓潤的邊角，內/外陰影，懸停狀態的風格，和過渡懸停風格-全部使用樣式面板。

你創造了什麼

按鈕文本➜

應用“按鈕”類

按鈕文本

提示： 在網頁設計，你可以一類適用於多種元素，使它們看起來是一樣的。適用於您通過點擊[+]在樣式面板的頂部，鍵入“按鈕”找到該類風格的鏈接上面的“按鈕”類。

表單設計實例

謝謝！

你的搖滾我的襪子！

哎呀！同時提交表單出事了:(

自己的風采吧

謝謝！您提交的內容已收到！

哎呀！同時提交表單出事了:(

TIP： 首先創建類的文本字段和按鈕（應用相同的類兩個字段）。然後改變邊框樣式，背景顏色，以及懸停和按下狀態添加樣式。不要忘了風格的“成功”狀態的表單元素，在設置面板（齒輪圖標的右上角）發現。

印刷術的例子

萊克伍德斯托特

萊克伍德，科羅拉多州的黑暗啤酒

傳說中的粗壯誕生出的一個山男子和他最心愛的東西，在科羅拉多州萊克伍德市的美麗的婚姻。山上的人也愛他的斧頭和他的單桿雷明頓槍，但沒有那麼多，因為他愛他的城市。他夢見她flowy河流和雄偉的山脈。於是，他她的名字命名了他最大的粗壯。因此，光榮是粗壯了生產經歷的一座大山把人的心臟中。

“我製作的這個光榮的啤酒，以表達我永恆的愛為我美麗的城市。”

- 山人

自己的風采吧

萊克伍德斯托特

萊克伍德，科羅拉多州的黑暗啤酒

“我製作的這個光榮的啤酒，以表達我永恆的愛為我美麗的城市。”

- 山人

TIP： 來吧，添加自定義的字體和樣式的背景。酷提示：如果您添加的字體樣式父塊，它的所有兒童的文本元素將繼承這些文本樣式。在CSS這種行為被稱為“級聯”。

＃4佈局與CSS

構建網絡佈局與CSS

類似於添加的風格元素，改變一個元素的位置先添加一個類，然後編輯的位置屬性。您將了解的margin，padding，顯示，浮動，溢出和位置。

保證金和填充的例子

聯邦特工突襲Gunshop，查找武器

店老闆史蒂夫Witmere此前因涉嫌黑市交易火箭筒。承認自己捲入俄羅斯黑手黨。

其中在gunshop發現眾多火箭炮是數以萬計的價值至少萬美元非法獲得的畫作。那是一個沉重的代價，這些愚蠢的畫作。

說明： 保證金和填充可以在樣式面板的位置面板上找到。加入餘量將增加空間的塊之外，並加入填充將增加一個塊的內部空間。

添加自己間距

聯邦特工突襲Gunshop，查找武器

店老闆史蒂夫Witmere此前因涉嫌黑市交易火箭筒。承認自己捲入俄羅斯黑手黨。

其中在gunshop發現眾多火箭炮是數以萬計的價值至少萬美元非法獲得的畫作。那是一個沉重的代價，這些愚蠢的畫作。

TIP： 首先在主灰塊（父元素）的各方加入填充。然後加入下邊距個別文字元素（子元素）之間添加間距。提示：在使用保證金/填充控制，適用於所有的兩側和ALT也適用於相反的一面按住SHIFT。

“顯示：塊”的例子

此標題設置為display：block

本段被設置為display：block。使其充滿父窗口的寬度和堆疊在其它塊的頂部。

按鈕顯示：模塊與顯示按鈕：阻止該鏈接被設置為display：block 此鏈接設置為display：block

說明： 設置元素的顯示設置，以阻止會讓他們對彼此頂部堆疊並填寫100％其父塊的寬度。大部分元素實際上在默認情況下此設置。

讓他們“顯示：塊”自己

這是一個按鈕，這是一個按鈕鏈接是顯示：內聯默認鏈接都顯示：內聯默認

提示： 選擇這些元素（有些是直插塊，有些是內聯），並使其顯示：塊，使他們對彼此頂部堆疊。

“顯示：inline-block的”榜樣

下載編輯刪除

說明： 設置元素的顯示設置為inline-block的會使塊的寬度順應它裡面的內容的寬度。這意味著，如果它們的含量是足夠小它們可以堆疊成彼此相鄰。您可以複製粘貼上面的按鈕和編輯中的文本，看看它是如何工作的。

讓他們inline-block的自己

下載編輯

TIP： 所以他們旁邊堆放彼此inline-block的：選擇上面的元素，讓他們顯示。你將看到的圖像疊加旁邊的按鈕。提示：刪除按鈕和圖像轉換成單獨的事業部塊會讓他們對彼此頂部堆疊（因為股利塊都顯示：在默認情況下阻止）。

例如浮動

謝謝！您提交的內容已收到！

哎呀！同時提交表單出事了:(

說明： 設置顯示：inline-block的或浮動（這個例子）是並排堆放元素邊最常見的方式。在這個例子中，我會告訴你如何漂浮的東西。

自己浮起來

謝謝！您提交的內容已收到！

哎呀！同時提交表單出事了:(

提示： 首先選擇的文本字段，讓它浮動：左，並給它一個百分比寬度（例如：60％）。然後設置按鈕浮動：左，以及為其它寬度的百分比（例如：40％），所以他們倆加起來為100％。這是一個人工的方式來強迫任何元素並排堆放的一面。

絕對位置示例

我的喬杯

這是一個照片的標題文字。

精選

說明： 如果一個元素設置位置為絕對，你就可以在其母公司塊內的任意位置定位。選擇哪個父裡面定位，設置父元素的立場相對。注意：當元素是絕對定位的，他們漂浮在其他元素。

樣式自己動手

我的喬杯

這是一個照片的標題是我最喜歡的杯子喬。

精選

提示： 首先選擇圖像包裝元素，並將其定位為相對的。下一步選擇的標題，將其拖動到圖像設置它的立場絕對和選擇7預設。要定位精選徽章到正確的位置選擇第二預置和手動定位。

＃5 層疊樣式

利用層疊樣式

可以通過在彼此的頂部添加額外的類和在這些類中添加不同的樣式容易地創建一個元素的變體。看看下面，我們有一個按鈕的不同變化的例子。

wow

自己設計的按鈕

提示： 選擇第二個按鈕，然後點擊[+]旁邊的類中添加其他類。你可以稱之為“綠色”。然後給它不同的風格。這些樣式將覆蓋基本樣式一流的。然後創建一個紅色按鈕。

＃6傳媒查詢

設計為不同的設備

在一個Webflow你先設計你的網站，桌面設備，然後讓移動設備（接入設備圖標，在最上面一欄）的變化。添加樣式在移動裝置將覆蓋桌面樣式。

響應標題的例子

這是獲得在移動設備中的一些小的標題文字。

說明： 此標題是在桌面上非常大的，但是我們希望它是在移動設備較小。點擊在頂欄的設備看到，文本大小和行高度下降。

修復它自己

讓這個大標題文本變得越來越小的移動設備。

提示： 選擇此標題的平板設備上，使字體大小和行高度。做同樣的電話景觀與電話人像設備。你可以看到，

響應按鈕的例子

按鈕文本

說明： 此按鈕，就是要在小屏幕桌面，因為它很容易點擊鼠標光標。我們把它更大的移動設備上，這樣更容易挖掘用手指

按鈕文本

修復它自己

提示： 進入平板設備，提高了按鈕的填充。當你這樣做，這將覆蓋舊風格的桌面設置，並會級聯下降到低於平板的所有設備。

響應例如列

第1列

這是一個div塊裡面的一些文字。

第2列

這是一個div塊裡面的一些文字。

第3欄

這是一個div塊裡面的一些文字。

說明： 本欄目元素Webflow的可定制為每個設備。通過默認列堆疊彼此相鄰的桌面和堆疊在彼此的頂部上的移動設備。

第1列

這是一個div塊裡面的一些文字。

第2列

這是一個div塊裡面的一些文字。

第3欄

這是一個div塊裡面的一些文字。

修復它自己

提示： 選擇列或行元素以上（你也可以使用底部的痕跡導航欄或導航面板的右側找到它），進入元素的設置（齒輪圖標右上角），並確保列堆疊在移動設備上。

i-share+

在.... 中越台

超計劃

H2標題超計劃

自己嘗試一下

超計劃

基本佈局元素

你的造型元素

謝謝！

萊克伍德斯托特

萊克伍德斯托特

構建網絡佈局與CSS

聯邦特工突襲Gunshop，查找武器

聯邦特工突襲Gunshop，查找武器

此標題設置為display：block

加入我們的通訊

加入我們的通訊

我的喬杯

我的喬杯

利用層疊樣式

設計為不同的設備

這是獲得在移動設備中的一些小的標題文字。

讓這個大標題文本變得越來越小的移動設備。

第1列

第2列

第3欄

第1列

第2列

第3欄

需要更多的幫助？

視頻教程

論壇

幫助文檔

i-share+

在.... 中 越 台

超計劃

H2標題超計劃

自己嘗試一下

超計劃

基本佈局元素

你的造型元素

謝謝！

萊克伍德斯托特

萊克伍德斯托特

構建網絡佈局與CSS

聯邦特工突襲Gunshop，查找武器

聯邦特工突襲Gunshop，查找武器

此標題設置為display：block

加入我們的通訊

加入我們的通訊

我的喬杯

我的喬杯

利用層疊樣式

設計為不同的設備

這是獲得在移動設備中的一些小的標題文字。

讓這個大標題文本變得越來越小的移動設備。

第1列

第2列

第3欄

第1列

第2列

第3欄

需要更多的幫助？

視頻教程

論壇

幫助文檔

在.... 中越台