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

一、菜單思路參考及制作

在 CSDN 首頁中的菜單部分為一串橫排的內(nèi)容，并且可以進行拖動：

首先咱們添加一個行，命名為菜單：

接著肯定是需要設置上下的內(nèi)邊距內(nèi)容：

接著直接往這個行中添加文本內(nèi)容即可：

很明顯，當前文本字號與我們所需要的效果差距比較大，設置對應的字號使其大小（13號字體）合適于當前頁面：

由于每個字體都會左右相隔一段距離，那么此時直接設置這個文本的左右內(nèi)邊距即可：

接著我們復制這個文本在該行中進行顯示：

頁面呈現(xiàn)效果如下：

但是此時內(nèi)容換行了，我們該怎樣使內(nèi)容同一行進行顯示呢？并且可以滑動？

此時只需要設置包裹這些文本的行取消換行即可，點擊菜單行，在屬性中把自動換行關(guān)閉即可：

接著還需要設置當前這一行的剪切屬性，剪切屬性可以使當前這一行的內(nèi)容可以滑動，但是會出現(xiàn)滾動條，咱們還需要將滾動條隱藏，使其更加美觀：

效果如下：

此時你再預覽將會發(fā)現(xiàn)頁面可以進行滑動。

二、輪播圖制作

菜單欄之后是一個輪播圖：

該輪播圖占據(jù)整行，并且自動進行滾動，那如何制作呢？需要通過行和圖片自己設置嗎？這個不需要，咱們只需要再擴展組件中的特殊功能容器找到輪播組件即可：

首先添加一個行，命名為輪播，并且設置高度為 160px 背景色為透明：


接著添加輪播容器：

添加輪播內(nèi)容后我們發(fā)現(xiàn)當前輪播內(nèi)容超出了父容器高度，此時需要設置這個輪播容器的高度為 100%：

接著給這兩個輪播頁添加對應的對應的背景圖片：

此時頁面效果如下：

那如何增加對應的文本呢？

增加文本內(nèi)容有兩個方式，其中一種是在這個輪播容器之下新建一個行，在這個行中添加對應的文本。那你可能問，創(chuàng)建一個行不就在下面顯示了，如何可以顯示在當前輪播也之上呢？

其實咱們的行有很多作用，例如在行中設置內(nèi)容后，設置上的上外邊距為負，那么此時就可以往上移動，這樣就可以覆蓋在這個輪播容器之上了，但是文本卻不能進行輪播，這種方法需要額外的制作很多的事情，例如你要設置動畫，幾秒播放一次，這個還好，更加麻煩的是你還需要設置鼠標拖動時你要如何進行響應，這并不是很劃算，在此只是提供一個不一樣的思路，咱們現(xiàn)在在這個輪播頁中添加文本還是要從整個輪播容器中進行添加。

輪播容器中的輪播頁是一個頁面，那么一個頁也是一個容器，所以咱們可以在這個輪播容器中添加文本內(nèi)容，但是這個文本內(nèi)容你還需要控制，最好的方法就是添加一個行，設置其內(nèi)邊距以及一個對齊方式，這樣就可以很方便的控制文本了。

首先添加一個行命名為文本在這個輪播頁之中：

由于其本身這個行具有背景色，所以導致輪播圖遮擋：

此時直接設置這個行的背景色即可：

此時你可以設置當前行的高度為輪播頁的高度：

再設置垂直方向的對其為底部，這樣內(nèi)容就會在底部顯示，你添加文本也會在底部顯示：

添加文本后設置其顏色和大小：

現(xiàn)在將會在底部顯示，但是我們不要絕對的底部，此時你可以搜索當前行的高度也可以設置內(nèi)邊距即可，此時我設置左內(nèi)邊距以及高度縮小：


此時效果如下：

總結(jié)

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

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