1小時賺300塊，不打代碼幫人做個吃雞網頁 [IVX實戰第3篇]

作者簡介

作者名：1_bit
簡介：CSDN博客專家，2020年博客之星TOP5，藍橋簽約作者。15-16年曾在網上直播，帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息，迷茫的你會找到答案。

實戰目錄

1小時學會不打代碼制作一個網頁精美簡歷（1）
1小時，不會代碼的我如何完成網易云音樂大作業網頁制作？（IVX 第2篇）

注：所有資源可以私聊 bit 哥拿~歡迎私聊熱心博主 bit 哥喲

創建IVX項目

👸小媛：bit 哥，最近有人找我做一個網頁，但是我不會做，300塊錢呢。

🐶1_bit：啥網頁？給你300？

👸小媛：吃雞的網頁，賺了300我就可以吃半個月了，下面就是一個示例。

🐶1_bit：哈哈哈，我覺得一周你就用完了。

👸小媛：趕緊教我吧，用 IVX，不用打代碼應該很快。

🐶1_bit：你自己寫不好嗎？

👸小媛：我不熟，你教教我，這樣我也很樂意認真聽。😄

🐶1_bit：你這是什么歪道理，我竟然聽了覺得很有道理，那你趕緊打開在線編輯環境吧 https://editor.ivx.cn/。

👸小媛：bit哥我已經打開了，那我就創建一個項目咯，我選擇的是相對應用。

🐶1_bit：…

👸小媛：第二步是不是選擇大屏，我已經切換屏幕了。

🐶1_bit：看吧，你都會的。

👸小媛：哈哈哈，第三步是不是選擇前臺然后點擊頁面新建一個頁面，這樣比較方便好操作。😇

🐶1_bit：你都會，請繼續。

👸小媛：剩下的我不懂了，哈哈哈。😂

標題頭編寫

🐶1_bit：剩下就開始編寫標題頭了，我們可以先看看標題頭，你覺得有哪些元素？

👸小媛：其實開頭就是一個圖片 logo，然后新聞和社區就是兩個下拉列表，其他的就是文本咯。我標記的黃色就是標題頭，綠色就是下拉列表，其他的就是文本了。

🐶1_bit：那這個時候我們應該做什么呢？

👸小媛：創建一個行，然后在行內創建一個行容器存放logo？

🐶1_bit：其實我們可以先創建一個行重命名為 main，包裹這個網頁的所有元素，然后再創建一個行用來包裹這個 logo 圖片。首先創建一個包裹所有內容的行，重命名為 main，并且設置高度為包裹。

👸小媛：為什么要設置高度為包裹呢？😳

🐶1_bit：包裹的意思就是指將內容全部包裹起來，這個行中有多少元素，這些元素所堆疊的高度外面這個容器就剛好包裹住，這時這個 main 行的高度就等于內容堆疊的高度，這樣就不用去設置這個行的高度了，豈不是很方便？

👸小媛：明白了。

🐶1_bit：接下來我們在這個 main 行中創建一個容器，名為標題，用來存放標題這一行的元素。

👸小媛：是不是標題這一行還需要設置高度為包裹呀？

🐶1_bit：聰明，是的。

🐶1_bit：接下來我們繼續在標題行中創建一個行，名為 logo 用于存放 logo 圖片，這個 logo 行寬度占比 10%，我們只需要這個行的寬度百分之十就可以了。

👸小媛：這里不需要設置高度為包裹嗎？😩

🐶1_bit：不需要的，因為我們等一下要將圖片的顯示改為上下居中，這個時候得有高度，例如我們在這里設置這個行的高度為 80px，若圖片高度為 70px 就可以上下距離 5px 單位，這樣就實現了垂直居中，如果你設置的是包裹那么設置上下居中就不方便了，當然左右居中也比較好看。

👸小媛：明白了，現在是不是要在這里面添加一個圖片？

🐶1_bit：我們現在點擊 logo 行，再點擊左側組件中的圖片添加進行中，此時將會出現一個資源選擇框，我們選擇 logo 圖片就可以了。

👸小媛：懂了，我添加好后，由于設置了剛剛的那些屬性，這時我的頁面就顯示這個圖片居中了。

👸小媛：我覺得我們改一下標題行、logo行的背景色可能會好看點，我把標題行和背景行的顏色都改為了 #252525。

🐶1_bit：那接下來我們就開始添加下拉列表吧。

🐶1_bit：我們此時在標題行中添加一個行，命名為 menu，設置這個行的寬為 90%、高度為包裹，這樣這兩個行就占據了整一行的 100%。

👸小媛：然后就可以在這里創建一個行，行里面就是下拉列表了吧？

🐶1_bit：是的，這個時候創建一個行，我們可以命名為 menu1，然后在里面添加一個下拉列表就可以了。

👸小媛：往 menu 里面添加的 menu1 也需要設置一下行高為 80px 吧？因為這樣才可以上下居中，并且我們還可以設置 menu1 行的寬度為 10%。

🐶1_bit：是的。

👸小媛：下拉列表在哪呢？

🐶1_bit：下拉列表在擴展組件里面，我們點擊menu1，往里面添加一個下拉列表（菜單）就可以了。

🐶1_bit：此時我們可以修改下拉菜單的寬度為 100%。

👸小媛：那怎么樣添加里面的菜單內容呢？😏

🐶1_bit：這個時候我們只需要點擊menu1，在這個行里面創建一個一維數組，在這個數組中添加要顯示的數據。

👸小媛：那接下來怎么做呢？

🐶1_bit：接下來我們可以為這個下拉菜單綁定數據。點擊下拉菜單，點擊如下圖黃色框選位置。

🐶1_bit：隨后在當前選項中內容框中點擊從對象樹中選擇。

🐶1_bit：此時將鼠標移動至一維數組中點擊選擇。

🐶1_bit：然后在出現的選擇屬性欄中選擇某個值即可。

🐶1_bit：此時出現如下黃色框選內容，將下標改為0即可。

👸小媛：為什么要改成0？

🐶1_bit：因為 0 就表示那個數組中的第一個選擇，如果是1就是第二個元素。

👸小媛：你的意思是，數組是從 0 開始數數的？

🐶1_bit：沒錯，是這個意思。

👸小媛：我改了，點擊預覽運行出來了，問題不大。😏

🐶1_bit：接下來我們改一下這個下拉列表的屬性，背景色設置為透明，邊框設置為無即可。

👸小媛：這個時候是不是還要改一下行的背景色？

🐶1_bit：嗯，這樣改了就很舒服了。

👸小媛：我把menu1 的背景色改成了 #252525。

🐶1_bit：那第二個下拉列表怎么做呢？

👸小媛：直接復制不就好了。

🐶1_bit：哈哈哈，我們直接復制一個 menu1，更改名字為 menu2。然后更改 menu2 中的一維數組1名稱為一維數組2，并且將 menu2 中的下拉菜單的列表值更改為一維數組2.

👸小媛：是不是還要改一下一維數組2的值？

🐶1_bit：是的，我們改一下值就ok了。

👸小媛：我運行了，為什么我的值是這樣的？

🐶1_bit：你終于發現了嗎？這個時候你需要修改下拉列表選項的內容為這個一維數組，同理，跟之前一樣，你重新選一遍。

👸小媛：可是下拉菜單的白色背景好丑啊。

🐶1_bit：那就改一下吧，簡簡單單，改一下選項背景顏色就可以了。

👸小媛：唔，解決。剩下的都是文本，是不是再復制一個 menu1，然后重命名為menu3，在menu3里面刪除下拉菜單，然后改為文本就可以了？

🐶1_bit：是的，然后再復制幾個 menu3 就解決了。

👸小媛：接下來再改一下背景色，就解決了。😎

Banner圖編寫

👸小媛：然后就開始做那個大圖了吧？

🐶1_bit：是的，會做嗎？

👸小媛：簡單吶，直接一個行命名為 banner，然后添加一張圖片不就好了？當然這個圖的高度肯定為包裹，圖片寬度肯定為 100%。

公告頁內容編寫

🐶1_bit：昂，可以，不錯。

🐶1_bit：接下來開始做通告頁了。

👸小媛：這里怎么做？

🐶1_bit：我們新建一個行，命名為 c1，設置高度為包裹，這個行可以添加一個背景。

👸小媛：為什么沒有看到圖片？

🐶1_bit：那是因為你沒有高度肯定不顯示了，你在里面加內容，撐開就可以了。

👸小媛：你意思是說撐開后就自動有內容了？

🐶1_bit：是這個意思。

👸小媛：明白了，所以現在就應該往里面加東西吧。😎

🐶1_bit：這個時候你在這里面加兩個行，一個放左邊的圖片，另一邊放一個文章列表就ok了，但是這兩個行一定要設置寬度都是為 50%，這樣就可以占完這一整行了，高度記得設置為包裹。

👸小媛：接下來就是在左邊行添加一個圖片序列吧？然后在彈出的資源選擇框中選中多張圖片，然后點擊打開。

🐶1_bit：對的，然后點擊圖片序列，修改一下這個圖片距離這個行頂部的距離，在這里設置為100，然后設置這個行距離底部的距離，在這里設置為50，最后設置一下距離這個行右邊的距離，設置為30，此時這個圖片序列就不會緊挨著這個行的邊緣了，當然也要設置這個圖片的寬度為整個左邊行的 70%，否則是沒有間隙的喲。