制作iVX 低代碼項目需要進入在線IDE：https://editor.ivx.cn/

一、頭部導航欄思路參考

首先我們可以查看CSDN的博客首頁，從中查看一下布局：

在以上首頁中，我們可以得知其頂部為一個整行，這個行內容左側為一個logo，logo右側為一個輸入框，這個輸入框輸入文本后可以搜索對應的內容，在CSDN中搜索框可以搜索出用戶名、下載等內容，在我們只做博客時使個人博客，咱們并不做過多的搜索，在功能設計時咱們只需要搜索出對應的博客內容即可。

接著打開APP 文本也可以去掉，只需要再加上右側的頭像即可，最右側還有一個展開的菜單，在此咱們不不需要制作過多內容，所以該菜單也取消。

那如何使一部分內容靠左另一部分內容靠右呢？

我們查看首頁的標題欄，我們可以把整個標題欄內容設置為左側一個部分以及右側一個部分：

左側為logo 和搜索框，右側為頭像框。

二、頭部導航欄制作

思路搞清楚了咱們開始制作頭部導航欄吧，首先創建一個相對應用項目，隨后點擊前臺創建一個頁面：

點擊頁面后添加一個主要的行，該行將會包裹所有當前頁面內容。

為何使用一個行包裹呢？因為在 iVX 中這樣比較方便控制多余的內容，當然你也可以分開，在此還需要重命名頁面1為首頁：

接著給這個主要內容行設置高度為撐開，背景顏色透明：

設置撐開的原因是為了方便裁剪屬性設置為 y 軸滾動，因為頁面內容過多時咱們需要為滾動當前頁面：

設置完畢后，接著咱們需要隱藏y軸（垂直方向滾動條）將會更加美觀：

接著在這個主要內容行之中創建一個行，命名為頭部：

接著給這個頭部設置高度為包裹：

隨后設置這個行的上下內邊距，使這個頭部行的內容跟頭部底部有一定距離，更加美觀，其實csdn 也是這樣做的：

當然我們再次設置的不止有上下，當然還有左右內邊距：

此時設置當前行背景色為白色：

接著設置一下整個頁面的背景色為 ‘#e7e9ee’：

隨后設置往頭部之中添加兩個行，一個命名為左一個命名為右：

左右兩行的高度都設置為包裹，并且背景色透明、寬度都為 50%，他們的高度給他們自己的元素決定就好：


隨后在左行中添加一個行當做logo：

接著設置當前logo 的寬度為 30px*30px、設置背景色為藍色：

此時呈現效果如下：

若你想更為好看一點，那就設置一下他的圓角值并且取消一個角：

頁面效果如下：

接著添加一個文本框在logo 右側，此時直接添加文本框將會超格：

此時設置一下文本框的寬度以及左外邊距使其距離左側有一定距離：


接著設置一下輸入框字體使其適應當前輸入框大小：

最后更改一下搜索框的提示文本即可解決：

接下來制作右行的內容，此時設置右行的水平對齊為靠右，這樣行內的內容就會往右靠齊：

接著往這個行中添加一個圖片，設置寬高為 30px：


接著再設置一下圓角就可以了：

但此時還是跟CSDN 的頭部有一點區別，總感覺csdn 的頭部內容有一點陰影，那我們只需要設置當前行的陰影即可，找到整個頭部行，設置陰影偏Y為3，模糊為1，設置一個陰影顏色即可：

那么此時效果如下：

總結

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

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