首頁一共分為3個頁面，分別是首頁：

影院：

我的：

一、標題頭制作

首先我們新建一個 web 相對應用，隨后點擊前臺，在前臺新建一個頁面：

接著給予這個頁面一個背景色：

為了使頁面清晰，我們可以重命名該頁面為首頁：

接著創建一個行，命名這個行為標題，設置他的高度為自動，背景色為白色，以及為了之后內容的垂直對齊，設置他的垂直對齊為居中即可：

接著為了方便其內部元素距離上下左右的距離，設置左右上下的內邊距：

由于我們的標題分為左右兩個部分，在此直接在這個標題行內部創建兩個行，一個命名為左，一個命名為右：

左右兩個行，由于本身自帶高度，都設置高度為包裹，并且設置寬度為 50%使其元素能夠占據一行，并且還需要更改他們的背景色為透明，否則自身的背景色將會蓋住標題欄的背景色：

接著在左側創建一個行，用于存放logo，在此沒有 logo 可以暫時給予一個背景色，這個行的高寬為 30px，設置背景色為紅色：

此時頁面顯示如下：

也可以重命名這個行為 logo ，方便之后添加 logo 內容：

接著我們添加下拉菜單列表，下拉菜單列表在擴展組件中，點擊需要添加下拉菜單的容器，然后點擊擴展組件，點擊下拉菜單即可添加：

在下拉菜單的屬性中，，更改當前選中值，設置選項列表中的內容，更改大小即可完成：

接著在右側的行中更改水平對齊屬性選擇靠右，此時添加的元素才有靠右顯示：

接著添加一個正在熱映文本，該文本需要設置其排版，上下左右內邊距，否則無法設置其邊距框：

接著在這個文本中的邊框與圓角處設置下邊距的顏色為主題色（紫紅色），只有下邊距生效，其他邊距都設置為空即可：

那么此時標題欄即可完成：

二、影片內容制作

標題頭做完后就到了影片內容制作部分，影片內容布局如下圖框選所示：

從圖中我們可以看到，當前影片內容分為一個大框為主題，其內部首先分為左側的封面圖以及右側的內容；右側的內容又分為左邊飲品內容和右側的購票內容，那么此時我們可以首先先創建一個大框，這個框為一個行，包裹所有影片信息，并且命名為內容，包裹其他所有的影片內容：

這個內容行還需要去掉對應的背景色、高度（設置為包裹），否則將會自帶高度。接著由于我們的內容需要與上下左右邊緣有一定距離，那么此時直接設置內容行的內邊距即可統一的為其元素自帶邊距效果，此時設置這個內容行的邊距如下：

接著再內容行中創建一個行，命名為熱映內容，這個熱映內容也就是包裹單獨一個影片信息的行：

由于每個影片內部也有一定的內邊距，那么此時我們再設置這個行的內邊距情況，此時還需要設置這個熱映內容的高度為 130px，因為內部等下需要設置一個行高度為撐開，如果父容器沒有高度給定，那么子元素的高度撐開則會無效：

接著開始創建這個影片信息。由于之前我們就已經知道，這個熱映內容分為左側是圖片，右側是信息，那么此時直接在這個熱映內容內部創建兩個行，一個命名為左、一個命名為右，并且高度和背景色也要去掉：

左和右由于在同一行顯示，所以需要設置其寬度，防止超過整行寬度，左寬度設置為25% 右設置為 75%，使其占滿整行：


接著在左行中添加一個圖片為當前影片圖片，由于直接添加會導致圖片按照原本的大小進行顯示，在這里設置圖片寬高為 100% 即可占滿整行：

接著右側信息內部中也分為左側和右側 ，左側為影片信息，右側為按鈕購買，那么此時創建兩個行為這些內容的父容器，并且給予命名：

此時左側信息為 70% 右側購票為 30% 寬度，在此需要主要的是，右側的購票信息按鈕為垂直居中，那么此時就需要給予這個購票信息的高度為撐開，再設置垂直對其為居中（如果你父容器沒有設置高度，那么撐開無效）：


接著在左側添加文本，文本的寬度都為 100%，這樣就會占據整個行，使其他元素可以自動換行進行顯示，在此需要注意的是電影評分這一節，我們發現會有顏色的分數，此時可以直接給予一個行，分文本進行顯示：

若覺得這個行挨的太近，那么此時只需要給予這些行的內邊距一定大小即可：

最后我們在右側添加一個按鈕，設置對應的文本和顏色：

三、添加導航容器

我們還發現，這個首頁的導航欄是在下部：

那么此時就需要用到一個導航容器，點擊擴展組件，找到導航容器添加到當前頁面：

此時將剛剛所編寫的所有內容賦值到導航頁1中：

重命名導航頁1為首頁：

接著點擊首頁導航欄，在屬性中更改選中的圖標以及文本：

接著預覽：

最后把其它導航頁的名稱和圖片進行修改即可（添加多個導航直接復制即可）：