點擊整個專欄查看其它系列文章 （系列文章更新中…）：《iVX 高仿美團APP制作移動端完整項目》

項目界面預覽：

一、美食頁頂部商家頁制作

1.1 頁面主格調確認

該美食頁為首頁中美食按鈕點擊后進入的頁面。該頁面分為頂部的標題、搜索、商家店鋪區；中部的分類以及最下面的商家推薦。

咱們首先制作頂部區域，首先創建一個頁面重命名為美食：

接著，在美食頁下創建一個行：

這個行重命名為主要，用于包裹其內部的內容：

在此需要給這個行設置一定的屬性，是其中元素方便與邊緣有間隔，首先設置對應的高度為包裹、背景色為透明：

接著在對應的上下內邊距中設置距離為 6：

接著我們需要設置該頁的背景主題色，回到該頁面設置主題色為紅色：

1.2 標題設置

接著創建一個行命名為標題，并且設置對應的背景色以及高度：

接著咱們可以看到，這個標題中，左側有一個圖標，右側有一個文本：

咱們在此可以在這個行中添加兩個行，一個命名為左，一個命名為右：

此時我們可以清晰的看到，左右兩行高度已經超過了當前父容器高度，需要將高度同意設置為包裹，已經背景色為透明：

接著咱們在左側添加一個圖標，并且設置其寬高為 30px 30px，顏色為白色：

當然，大小也需要對其進行設置；接著咱們在右側的行中添加一個文本，并且給予對應的文本為美食：

隨后在設置左行的寬度為包裹：

右行的寬度為撐開：

此時右行與左行將會共同占據這一行，其原因是右行撐開將會把剩余空間給占據，效果如下：

接下來，咱們設置右行的水平對齊為居中：

由于左行占據了部分大小的原因，右行的居中并不會完全居中，此時我們知道左行大小為包裹，那么其圖標元素為 30 的寬，那么只需要美食文本往右側偏離 30px 即可，設置左外邊距為 -30px即可：

此時文本將完全居中。

二、內容頁制作

2.1 內容頁外框架確定

我們先看內容頁外部框架整體布局：

由此我們的值，該內容包裹在一個容器內，該容器的背景色為白色，那么我們在此需要創建一個行容器，并且設置其高度為包裹、背景色為偏白色：

2.2 搜索框制作

接著我們需要制作搜索框內容：

我們在內容行下創建一個行，命名為搜索框，并且設置背景色透明、高度包裹以及水平垂直居中：

接著咱們在搜索框中創建兩個元素，一個是輸入框一個是按鈕：

此時我們發現，該元素距離頂部過于挨近，咱們設置搜索框的上外邊距為 12：

接著咱們對輸入框和文本設置對應的樣式信息：

要想文本框和按鈕完全貼合，只需設置其密貼的圓角為直角即可，例如按鈕直接取消了左上和左下圓角的生效：

三、商家封面制作

接著往下就開始進入商家方面制作：

我們從上圖中得知，商家封面為整個容器進行包裹，頂部為左側一個頭像以及右側為點名和標簽：

此時先創建一個行，并且在行內再創建一個行：

這樣進行操作是使用外面商家行設置內邊距控制間隔：

對應的內部行也需要設置對應的內邊距：

接下來創建兩個行，一個叫做封面一個叫做信息：

方面設置上下左的外邊距信息使其內部元素有間隔：

信息也創建對應的內邊距信息：

其中封面的寬度設置為 20%，信息的寬度設置為 80%：


在封面中創建一個圖片，設置寬高為 60：

此時頁面效果如下：

在此我們再分析該商家頭部的內容：

我們可以返現，該商家頭部右側分為上下兩個區域，那么在此我們需要在這個商家頭部內測創建對應的兩個行，一個命名為信息頂部，一個命名為提示：

信息頂部中又分為左側的標題和右側的進店按鈕，那么此時為了方便控制，編寫兩個行：

接著在左側和右側中方便創建文本，設置對應的值即可：

那么接下來創建提示內容標簽，直接在提示內容中創建對應的文本即可：

要想有示例中的效果，只需要對應的把其屬性更改即可，若想使其有一定間隔，只需要對其設置外邊距即可。

接著咱們在商家下創建一個絕對定位容器，設置其高度為 60，在其內部創建一個圖片：

那如何使其覆蓋到下面呢？（圓角設置其圓角大小即可）此時只需要設置下外邊距為負數即可，在此由于當前的絕對容器高度為 60，那么只需要設置值為 -60 即可使其向下移動到與封面的高度相同，那么即可覆蓋：