注：iVX也有免費直播課《第八期直播課》

一、首頁制作

首頁預覽如下：

首先在博客頁創建一個相對應項目：

接著選擇前臺，創建一個頁面，命名為首頁：

接著更改當前屏幕為小屏尺寸：

接著我們分析這個標題頭部，分為左右兩側，左邊為一個logo（紅色）區域，右側為一個頭像區域：

那么此時創建一個行命名為標題，在這個行內創建兩個行，一個命名為左一個命名為右：

在此需要設置左右兩行的高度為包裹，并且為了使者兩行能夠同時在一行上顯示，每行的寬度還需要更改為 50%：

那么此時最外層的標題行再設置一個高度為 50 px 即可：

此時為了使標題頭部內的元素距離上下左右有一定的距離，那么直接設置標題行的內邊距有一定值即可：

接著往左側行添加一個 logo，設置大小和背景色：

再添加一個文本輸入框：

接下來還需要左右兩行都設置高度為撐開，并且使其垂直居中，否者垂直方向不會對其：

最后再往右側添加一個圖片，設置其大小圓角即可：

二、內容設置

由于我們的頁面還需要顯示在PC端，那么此時我們還需要添加一個行，命名為主要內容，設置主要內容的寬度為60%，這樣整個頁面才能更好的顯示在 PC 端，否則內容太寬不利于用戶使用：

接著把整個標題放入主要內容之中，此時即可完成如下效果：

居中顯示是因為整個頁面設置了水平居中，這個一定要注意，整個主要內容行的高度也要設置為撐開：

三、導航內容制作

接下來開始制作導航框：

導航框的內容其實為一個行，其中文本設置內邊距即可有了距離，首先添加一個行命名為導航：

接著設置該行的高度為包裹，還需要設置裁剪x 橫軸，并且隱藏滾動條：

因為當頁面縮小后，當前頁面若不使用x方向滾動，那么導航內容將會換行，在此設置了裁剪為 x 軸后則不會，并且隱藏滾動條更加美觀。

接著添加多個文本設置內邊距即可：

要實現這一步還需要使導航的自動換行關閉：

三、導航內容制作

廣告區域就很簡單了，設置一個行命名為廣告，給予高度后添加輪播組件即可：

輪播組件在擴展組件中：

四、內容區域創建

接著創建一個內容區域，命名為博文內容：

博文內容需要使用裁剪垂直方向，因為內容過多時，可以使整個區域發生拖動效果，并且高度需要設置為撐開：

接著添加一個行，命名為內容，用于存放文章信息，設置其內邊距使其內容距離邊緣有一定距離：

接著創建一個文本，設置內容寬度和最大行號，不設置內容寬度會自動使內容超范圍顯示：

最后再添加一個行命名為閱讀內容，創建兩個文本即可完成首頁內容的制作：

總結

以上是生活随笔為你收集整理的一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。