注：iVX也有免費(fèi)直播課《第八期直播課》

一、首頁(yè)制作

首頁(yè)預(yù)覽如下：

首先在博客頁(yè)創(chuàng)建一個(gè)相對(duì)應(yīng)項(xiàng)目：

接著選擇前臺(tái)，創(chuàng)建一個(gè)頁(yè)面，命名為首頁(yè)：

接著更改當(dāng)前屏幕為小屏尺寸：

接著我們分析這個(gè)標(biāo)題頭部，分為左右兩側(cè)，左邊為一個(gè)logo（紅色）區(qū)域，右側(cè)為一個(gè)頭像區(qū)域：

那么此時(shí)創(chuàng)建一個(gè)行命名為標(biāo)題，在這個(gè)行內(nèi)創(chuàng)建兩個(gè)行，一個(gè)命名為左一個(gè)命名為右：

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

那么此時(shí)最外層的標(biāo)題行再設(shè)置一個(gè)高度為 50 px 即可：

此時(shí)為了使標(biāo)題頭部?jī)?nèi)的元素距離上下左右有一定的距離，那么直接設(shè)置標(biāo)題行的內(nèi)邊距有一定值即可：

接著往左側(cè)行添加一個(gè) logo，設(shè)置大小和背景色：

再添加一個(gè)文本輸入框：

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

最后再往右側(cè)添加一個(gè)圖片，設(shè)置其大小圓角即可：

二、內(nèi)容設(shè)置

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

接著把整個(gè)標(biāo)題放入主要內(nèi)容之中，此時(shí)即可完成如下效果：

居中顯示是因?yàn)檎麄€(gè)頁(yè)面設(shè)置了水平居中，這個(gè)一定要注意，整個(gè)主要內(nèi)容行的高度也要設(shè)置為撐開：

三、導(dǎo)航內(nèi)容制作

接下來開始制作導(dǎo)航框：

導(dǎo)航框的內(nèi)容其實(shí)為一個(gè)行，其中文本設(shè)置內(nèi)邊距即可有了距離，首先添加一個(gè)行命名為導(dǎo)航：

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

因?yàn)楫?dāng)頁(yè)面縮小后，當(dāng)前頁(yè)面若不使用x方向滾動(dòng)，那么導(dǎo)航內(nèi)容將會(huì)換行，在此設(shè)置了裁剪為 x 軸后則不會(huì)，并且隱藏滾動(dòng)條更加美觀。

接著添加多個(gè)文本設(shè)置內(nèi)邊距即可：

要實(shí)現(xiàn)這一步還需要使導(dǎo)航的自動(dòng)換行關(guān)閉：

三、導(dǎo)航內(nèi)容制作

廣告區(qū)域就很簡(jiǎn)單了，設(shè)置一個(gè)行命名為廣告，給予高度后添加輪播組件即可：

輪播組件在擴(kuò)展組件中：

四、內(nèi)容區(qū)域創(chuàng)建

接著創(chuàng)建一個(gè)內(nèi)容區(qū)域，命名為博文內(nèi)容：

博文內(nèi)容需要使用裁剪垂直方向，因?yàn)閮?nèi)容過多時(shí)，可以使整個(gè)區(qū)域發(fā)生拖動(dòng)效果，并且高度需要設(shè)置為撐開：

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

接著創(chuàng)建一個(gè)文本，設(shè)置內(nèi)容寬度和最大行號(hào)，不設(shè)置內(nèi)容寬度會(huì)自動(dòng)使內(nèi)容超范圍顯示：

最后再添加一個(gè)行命名為閱讀內(nèi)容，創(chuàng)建兩個(gè)文本即可完成首頁(yè)內(nèi)容的制作：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。