作者簡介

作者名：1_bit
簡介：CSDN博客專家，2020年博客之星TOP5，藍橋簽約作者。15-16年曾在網上直播，帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息，迷茫的你會找到答案。系列教程將會在流量降低時轉為付費位置，流量多時將不會，各位抓緊時間學習喲~

注：文章中所有素材在連接 https://codechina.csdn.net/A757291228/sucai 自取，如果有問題可以私聊博主 1_bit 喲~
熱情博主在線解答~

IVX第一篇制作精美簡歷：1小時學會不打代碼制作一個網頁精美簡歷

一、創建項目及相對布局

👸小媛：bit 哥，我期末了，要交網頁作業，但是劃水了一個學期不會做怎么辦啊！😭

🐶1_bit：網頁嗎？

👸小媛：嗯，但是我不會做，頭大，感覺又要掛科了，這個作業占一半的分數。

🐶1_bit：看吧，所以一直叫你認真學，你看，期末了交不上作業了吧？

👸小媛：bit 哥幫一下我嘛。 😰

🐶1_bit：你不會是想叫我幫你寫作業吧？不不不，不幫不幫，你要認真學習，我教你做。

👸小媛：可是明天就要交作業了，我不會搞怎么辦？

🐶1_bit：你的作業是什么？

👸小媛：我分到的是仿一個網易云音樂首頁。

🐶1_bit：簡單，你直接可以使用一個像 PS 一樣的編輯器繪制出一個網頁，然后把那個 HTML 導出，這樣你就可以完成你的作業了。

👸小媛：還可以這樣？😂

🐶1_bit：是的，很簡單的，那個編輯器叫做 IVX，是線上的 web 環境，你直接使用就可以了，鏈接是這個 https://editor.ivx.cn/ 。

👸小媛：進去了，第一步是創建一個應用是嗎？

🐶1_bit：是的，就像下面這樣，選擇相對定位，然后寫上你的應用名就可以了。

👸小媛：明白，我進去了。我想問一下，那個相對定位是什么意思？

🐶1_bit：相對定位其實就是指你的網頁的元素如何進行定位。例如你又一個圖片，圖片的大小要占據整個頁面的百分之幾，例如你設置為 50%，那么這個圖片在你拖動這個瀏覽器窗口，改變瀏覽器窗口的大小時會進行改變，自動更換成當前瀏覽器的 50% 大小。

👸小媛：ヾ(≧O≦)〃嗷~，你的意思就是這樣不管瀏覽器多大，都可以保證這個元素的占比大小咯？ 😎

🐶1_bit：是的，是這個意思，那么現在我們就正式開始吧，下面這個圖是一個預覽圖。

👸小媛：好的，迫不及待了。

二、導航欄制作

🐶1_bit：我們第一步先制作一個導航欄，下圖黃色框選位置就是導航欄。

👸小媛：不會做…

🐶1_bit：你不用打代碼，我們畫出來就可以了。首先在在線編輯器中，點擊屏幕切換，切換成中屏大小即可。

👸小媛：屏幕發生了改變耶。 😂

🐶1_bit：對的，這個時候屏幕就可以切換成一個中等屏幕大小的一個畫布，此時我們新建一個頁面。點擊左下角頁面進行新建，此時將會在右側的對象數中出現一個頁面1，我們在頁面1中進行頁面繪制。

👸小媛：好了，下一步呢？

🐶1_bit：下一步我們由于是做的是一個導航欄，那么這個導航欄是橫排顯示的，那么我們可以選擇一個行組件，這時在這個組件中添加一些文本就可以橫排顯示。

👸小媛：什么是組件呀？

🐶1_bit：組件你就理解成一些工具就可以了。

👸小媛：好的，就是一些功能？

🐶1_bit：可以這樣理解，其實就是你需要一個行，你就找一個行組件，那么你在這個行組件內添加一些文本元素，那么這些文本元素就會橫排顯示。

👸小媛：你的意思是說這個行就是一個容器？

🐶1_bit：是的。

👸小媛：還有你說的文本也是一個組件？

🐶1_bit：是的。

👸小媛：明白了，你的意思是一些特有功能或者元素已經寫好了的，就可以當做是組件吧？

🐶1_bit：可以這樣理解。我們此時點擊頁面1，在右側的組件欄中（下圖綠色框選部分），選擇行即可將行添加到頁面1中，添加后，行將會在右側頁面1中進行顯示。

👸小媛：哈哈哈，已經添加進去了，并且在頁面中顯示出了一行灰白色區域，這個就是行了嗎？

🐶1_bit：是的，這個背景色我們可以更改的，在這里只是為了方便我們觀察。此時我們可以點擊行，可以看到行的寬度是 100%，意思則是這個行就占據整個瀏覽器窗口的整一行，不管你如何拖拽更改瀏覽器大小，這一行打大小永遠是 100%。

👸小媛：原來如此。 😎

🐶1_bit：現在我們就可以給這一行添加元素了，此時在這個標題頭前是一張圖片，這個圖片為網易云的 Logo，我們此時可以點擊行1，然后再點擊下圖黃色框選位置的圖片組件，此時將會在行1下添加綠色框選位置的圖片，并且彈出棕紅色框選的資源選擇框，選擇網易云的圖片logo，就可以將選擇的圖片添加到圖片組件位置。

👸小媛：哈哈哈，接下來是不是應該創建一個文本框？

🐶1_bit：是的，你選擇行后，在組件欄中點擊文本框即可。

🐶1_bit：這個時候我們可以把這一行的高度改為 80px，再把圖片和文本框的高度也改為 80px。

🐶1_bit：當然圖片的高度也要同樣的去設置高度。

👸小媛：你的文本為什么會上下對齊？ 😱

🐶1_bit：其實很簡單，你選擇這個文本去更改響應的屬性就可以了；選擇文本后，設置文字樣式為第一個加粗，水平對齊為第二個左右對齊，垂直對齊為第二個上下對齊就可以了。

👸小媛：明白，接下來是不是要改一下這個行的背景色？

🐶1_bit：哈哈哈，可以的。我們選擇行，設置背景色為 #242424 就可以了，但是字體顏色要更改為白色，不然就看不見字體了。

👸小媛：解決。

🐶1_bit：由于我們看原圖，logo 和文字與左右兩邊都有一定的間隔，這個時候我們只需要設置左右的外邊距就可以了。

👸小媛：什么是外邊距？

🐶1_bit：外邊距你可以理解成這個元素的透明墻，我們設置這個 logo 和文本框左右的透明墻就可以讓這個元素左右兩邊有距離了。

👸小媛：原來是這樣，那怎么設置呢？

🐶1_bit：其實這個都屬于屬性內的內容，我們點擊 logo 圖片，在屬性中找到左外邊距，設置為一個合適的單位就可以了，在這里我設置的是 ；同理，文本框也可以進行設置，我們將文本框的左右外邊距設置成 即可，因為網易云音樂這個文本框右邊還有對應的內容，所以要設置外邊距。

👸小媛：成功。

🐶1_bit：接下來我們再到頁面1下創建一個行，將 logo 和圖片的行包裹進去。

👸小媛：為什么要這么做？ 😂

🐶1_bit：其實這樣只是為了好分類而已。我們將之前創建的行重命名為 logo和標題，并且拖拽到新創建的行中，設置新創建的行的高度為 80px，背景顏色為 #242424。
👸小媛：好了。

🐶1_bit：我們再重新設置一下 logo和標題 行的寬度為 25% 就可以了。

👸小媛：這個就是用于占據多少寬度的意思吧？

🐶1_bit：是的。

導出 html 包

👸小媛：對了，你確定這個可以導出成 html 文件？我擔心做完后就不能導出了。

🐶1_bit：當然可以，這個時候你點擊文件，點擊部署，就會彈出一個部署框。

🐶1_bit：然后選擇導出 HTML 包就可以了。

👸小媛：我點擊確定后自動下載了，解壓出來是一個 html 耶，打開后和做的一樣，太棒了。

🐶1_bit：是吧，沒騙你吧。我們繼續往下咯。

👸小媛：好的。

🐶1_bit：接下來我們更改行2的名稱為標題，在標題下創建一個一個行用來包裹標題的幾個選項。

👸小媛：為什么那一行從上面往下掉下來了？

🐶1_bit：那是因為那一行的寬度設置為 100% 了，第一行已經有了 25%占據，那么新設置的這一個行就不能設置為 100%，這個時候我們更改這一行的大小就可以了。例如我們更改成 50% 試試，高度也別忘記修改。

👸小媛：解決了，上去了。我是不是還應該修改一下背景色？

🐶1_bit：之后再修改吧，這樣顏色不同可以有區分，方便查看。

👸小媛：明白了。

🐶1_bit：我們接下來可以在這一個行下面添加幾個文本框，如果你懶，你直接復制 logo和標題 行下面的文本框進行粘貼就可以了。

👸小媛：哈哈哈，我感覺字體太大了，我就修改了一下字體大小為 18，還修改了文本。 😂

🐶1_bit：可以的，接下來你可以多復制幾個文本框，并且修改他們的文本值。

👸小媛：已經在做了，但是我復制了 6個文本框，后面兩個不顯示了。

🐶1_bit：那是因為這一行已經包裹不了那么多內容了，你需要怎么樣才可以讓這一行能夠包裹住那么多內容呢？

👸小媛：更改行寬？！

🐶1_bit：是的，去做吧。

👸小媛：我改成 60% 就可以了。

🐶1_bit：可是我們這邊還有幾個內容要怎么辦呢？

👸小媛：怎么辦？

🐶1_bit：我們可以更改屏幕大小，設置成大屏就可以了。

👸小媛：明白了，我修改成了最大的，哈哈哈。

🐶1_bit：那這個時候你是不是應該調整一下這種行的百分比？

👸小媛：在調了。我把 logo 和標題行的寬度設置為 16%，行1 設置成了 38% 就完美了。

🐶1_bit：接下來我們添加一個行用來包裹搜索框、創作者中心和登錄。調整寬度為 40%，高度為 80px，并且設置背景色方便查看。

👸小媛：收到。 😋

🐶1_bit：然后首先在這個行里面添加一個搜索框。

🐶1_bit：然后將這個行的垂直對其更改為居中，這樣就可以上下居中顯示了，當然也要更改一下搜索框的文本為 音樂/視頻/電臺/用戶。

👸小媛：解決。

🐶1_bit：接下來你再把發現音樂的文本復制到這個行2之下吧，偷懶是可以的。

👸小媛：哈哈哈，我并且還改了名字。 😋

🐶1_bit：其實這幾個內容都是靠右顯示的，那如何更改呢？

👸小媛：我已經發現了，在這個 行2 的水平對其中選擇靠右對其就可以了。

🐶1_bit：哈哈哈，接下來你把那個背景色換一下吧。

👸小媛：已解決，完美。

🐶1_bit：你搜索框還沒換顏色呢。

👸小媛：哈哈哈，忘了，背景改成白色了。

🐶1_bit：現在舒坦了吧。

👸小媛：是的。

🐶1_bit：把最外面一行更改名稱為標題吧，方便查看，還要里面的元素也更改一下。

三、添加標題欄效果

🐶1_bit：接下來我們加一些效果吧。

👸小媛：什么效果？

🐶1_bit：當我們鼠標移動進去的時候將會出現背景色更換，也就是選中的時候是另外一種顏色，但是 發現音樂 這個選項卻是默認選中的。

👸小媛：跪求 bit 哥教導。

🐶1_bit：emmm，來吧。首先我們點擊發現音樂，為其設置背景色為 #000000 純黑。

👸小媛：好丑啊，為什么左右兩邊沒黑色？

🐶1_bit：那是因為你的寬度就是那么寬喲。

👸小媛：不是設置了外邊距嗎？

🐶1_bit：外邊距不是寬度。

👸小媛：啊！你坑我。 😡

🐶1_bit：只是為了讓你學習，否者你記不住的。

👸小媛：emmm。

🐶1_bit：這個時候我們將那個外邊距給去掉，都改為0。

🐶1_bit：接下來我們直接設置這個文本的寬度為 16% 就可以了。

👸小媛：emmm，好了。

🐶1_bit：那么你其他的文本也要改喲，你先改 我的音樂 這個文本，去掉外邊距，然后設置寬度為 16%，然后復制 4 個，更改文本內容為之前的菜單內容就可以了。

👸小媛：bit哥是個大坑貨。我改好了，我把創作者中心和登錄都改好了。

🐶1_bit：這個時候我們可以點擊 我的音樂 文本框，然后點擊事件，然后將會出現一個事件列表。

👸小媛：什么是事件？

🐶1_bit：其實就是你這個元素發生什么事，你要對應做什么樣子的操作，這個就是事件了。

👸小媛：你是指我鼠標移上去就會做什么事？例如改變背景色？

🐶1_bit：是的，簡單吧？

👸小媛：得看你怎么做。

🐶1_bit：點一點觸發事件，選擇鼠標移入。

🐶1_bit：接下來你要哪一個元素改變背景色就選擇哪一個，點擊從對象書選擇。

🐶1_bit：然后將鼠標移動到我的音樂這里，點擊選擇。

🐶1_bit：之后在動作這一列選擇 設置屬性。

🐶1_bit：在出現的屬性內容中選擇背景顏色，我們更改背景顏色為 #000000 就可以了。

👸小媛：這個操作就好像是“選擇什么這個元素發生什么事，然后你要哪個元素去做什么操作”這樣？

🐶1_bit：是這個意思。這個時候我們點擊預覽。

🐶1_bit：這個時候我們發現，鼠標移動進去后顏色發生了改變，但是鼠標移走后顏色沒變，這該怎么做呢？

👸小媛：哈哈哈，就是鼠標移出嘛，我會。點擊 事件+ 這個按鈕，然后動作設置為 鼠標移出，設置屬性，背景顏色為原來的顏色就可以了。 😅

🐶1_bit：可以呀，不錯。那其他菜單選項你懂怎么做了嗎？

👸小媛：懂了，一個個去設置就可以了。

🐶1_bit：不用那么麻煩，我們直接選擇這個事件，ctrl+c 可以復制，然后點擊每個元素，粘貼就可以添加事件了；元素有了如下圖的標記就是已添加事件。

👸小媛：這么簡單？

🐶1_bit：當然還需要更改一點東西了。

👸小媛：是啥？

🐶1_bit：你需要更改一下選擇的對象，否則是會出問題的喲。

👸小媛：我點擊了朋友這個文本框的那個事件圖標進去后，發現對象全部是 我的音樂 這個，每個都修改就可以了吧？

🐶1_bit：是的，你修改試試。

👸小媛：哈哈哈，解決了，真簡單。

🐶1_bit：那下面那個小菜單懂了嗎？

👸小媛：和上面的一樣，設置個背景顏色，設置個左外邊距對其，然后添加文本，設置一下事件就可以了，我已經做好了，直接復制上面的那一欄，去掉圖片，修改大小，解決。

🐶1_bit：大佬，速度真快。

👸小媛：那是，一樣的東西就別講了，浪費讀者時間。

🐶1_bit：小媛大佬說得對，如果有不會的問我（bit哥）就好了，私聊就行，我是個熱情博主，可能太多人私聊回復會不及時，先在這里說聲抱歉，找素材也可以問我喲。

👸小媛：趕緊吧，別啰嗦了。 😂

🐶1_bit：好勒。

四、添加輪播圖

🐶1_bit：接下來我們做一下輪播圖吧。

👸小媛：好勒。

🐶1_bit：接下來我們創建一個行命名為輪播圖，用來存放輪播圖。

🐶1_bit：隨后我們點擊圖片序列進行輪播圖添加。

🐶1_bit：此時將會彈出一個資源選擇器給你，讓你能夠選擇圖片資源，找到對應圖片點擊確定。

🐶1_bit：我們繼續添加兩個按鈕作為左右滑動輪播圖選擇，一定要在圖片上面一個下面一個，元素在對象樹中越靠下那么就越顯示越左越靠前。

👸小媛：怪不得一直添加元素，之前的元素越來越靠下了。

🐶1_bit：這個時候我們可以更改一下這個輪播圖的高度，直接刪除原有的高度，設置寬度為 80%，這個時候這個高度就會自動的調整為合適高度了。

👸小媛：那意思是說那兩個按鈕就設置成 10% 就可以了？這也剛好占據完 100%。

🐶1_bit：是的。還需要設置這一個輪播圖行的高度為 包裹，這樣就可以剛好包裹內容，從而不需要設置其高度了。

👸小媛：那兩個按鈕怎么搞呢？

🐶1_bit：我們第一步應該給這個行設置垂直居中，這樣按鈕就下來了。

👸小媛：那怎么改那個按鈕呢？

🐶1_bit：簡單，這個時候你只需要刪除按鈕的文本，然后選擇使用圖標點擊左箭頭就可以了，另一個按鈕也是這樣。

👸小媛：原來如此，下一步呢？

🐶1_bit：下一步只需要設置背景顏色為當前圖片的接近顏色，再把當前按鈕的高度設置成 100% ，調整圖標大小，就可以了。這樣就可以占據了整個屏幕。

👸小媛：可是這個按鈕是圓角的，怎么設置不是圓角呢？

🐶1_bit：直接更改圓角大小為 0 就可以了。

👸小媛：然后我就直接把這個按鈕賦值一份，更改圖片當作右箭頭就可以了，哈哈哈。

五、制作熱門推薦歌手部分

🐶1_bit：接下來我們制作熱門推薦歌手欄。在這一欄中首先需要制作的是一個熱門推薦的標題內容，在這個標題中首先是一個圓圈，這個圓圈我們可以使用一個按鈕添加一個圖片代替，之后是一個文本框，內容為熱門推薦，接下來是多個文本框和分割線。

👸小媛：感覺很簡單呀。 😂

🐶1_bit：但是你還需要注意一個點，在這里右邊是一列，一直垂直往下，所以我們需要添加一個行用來包裹全部內容，這個行命名為 主要內容，并且在行中設置一個行還有一個列，其中行命名為 行內容，主要存放 熱門推薦 塊信息，然后列用來存放豎著的歌手信息，命名為列內容。

👸小媛：這樣就可以直接寫了嗎？

🐶1_bit：當然不是，你還需要在名為行內容的行中創建幾個行才可以進行編寫，因為這個行內容包含了幾個塊，這幾個塊分為幾個行進行編寫。

👸小媛：怎么做呢？

🐶1_bit：首先我們在行內容中創建一個行命名為 熱門推薦，就可以開始編寫熱門推薦的信息了。

👸小媛：現在可以直接進行編寫了吧？

🐶1_bit：還要設置我們的 行內容 寬度為 60%，列內容 的寬度為 30%，并且名為 內容 的列水平對齊為居中，這樣這個 行內容 與 列內容 就會左右留有一定空間，看起來美觀。

👸小媛：那我就直接在這個熱門推薦行里創建一個熱門推薦標題，創建一個按鈕，設置為圓圈圖片，設置背景色。

👸小媛：然后創建一個文本，設置一定寬度，并且設置文本的右邊框進行顯示，并且添加一個分隔線，分隔線直接換背景色就可以了。

🐶1_bit：你在哪找到的分隔線呢？

👸小媛：就這個呀，組件欄里。

🐶1_bit：不錯，那你接下來怎么做呢？

👸小媛：接下來不懂了，哈哈哈。

🐶1_bit：那我告訴你吧。這個時候我們創建一個行命名為 歌單集合1，行里面存放4個列，每個列的內容就是一個歌單的內容，我們可以先創建一個列，之后復制幾個就可以了。

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

🐶1_bit：此時我們設置這個 歌單列 的寬度為 25%，因為我們要4個列占據完整個行，并且設置這個高度為包裹，設置包裹可以剛剛好包含所有的內容。接下來往里面添加一張圖片，并且設置圖片的寬度為 100%，此時圖片就會充滿整個歌單列。

👸小媛：那圖片上面那個水印一樣的東西怎么做？

🐶1_bit：簡單，我們在這個列里面創建一個行，行里面創建一個文本和兩個按鈕，文本在對象數中存放在中間，第一個按鈕為播放圖片，第二個按鈕為播放圖片，此時調整一下大小就可以完成如圖類型的案例了。

👸小媛：那怎么放到圖片之上呢？

🐶1_bit：你的外邊距是可以設置為負數的，我在這里設置頂部外邊距為-35，就可以放到圖片上了，但是在這里要注意，一定要設置背景的透明度，這樣才可以達到半透明的狀態。



👸小媛：最后添加一個文本，就可以完成了吧？

🐶1_bit：不錯，此時我們在行內復制 4 個列，就可以完成了。

👸小媛：我改了一下頭像，好看多了，哈哈哈。

🐶1_bit：你還可以在這個行中再復制 4 個歌單，這個部分就完成了。因為第一行歌單長度大于了100%，所以會自動換行。我們為了保證有一定的間隔，我們設置復制后的歌單距離頂部有 10 個外邊距，這樣就可以更美觀，之后再復制這個歌單即可完成。

👸小媛：完美。

六、制作熱門推薦2

🐶1_bit：熱門推薦2的制作和1差不多，甚至簡單好多了，你知道怎么做嗎？

👸小媛：有點思路，大概就是兩個行，第一個行是標題，第二個行是里面的內容，里面的內容就是列。

🐶1_bit：記住創建行的時候一定要點才包裹，這樣這個行的高度才是完全是內容的高度。

👸小媛：嗯，創建好后，創建一個標題，由于類似我就不多說了。

🐶1_bit：嗯，繼續吧。

👸小媛：接下來直接創建一個行，這個行給一個高度，然后設置這個行內的元素水平居中也垂直居中，再設置一下圓角，這樣好看一點，這樣這個行的內容就可以居中顯示了。

👸小媛：接下來我們加兩個按鈕，設置圖片為左右箭頭，跟輪播圖一樣在此就不再詳細介紹了，只說明步驟。 😎

🐶1_bit：嗯，繼續。

👸小媛：現在我們添加一個列，存放一個歌單，其實與之前不同的是這里就換成一個圓角就ok了，其實直接賦值下來改一下圓角就沒問題了。

🐶1_bit：哈哈哈，你還真省事。

👸小媛：我們接著只需要多復制幾個，這里就做好了，簡簡單單。

🐶1_bit：哈哈哈可以的，那下面的榜單呢？

👸小媛：榜單也很簡單，也就是創建一個行，一個行里有一個列，每列元素就是一個行，然后第一行就是一個行，里面有一張圖片，設置個左右外邊距，這個行的垂直對齊為居中，這樣就完成右側那個兩個按鈕的垂直居中了，那兩個按鈕也就是按鈕換個圖片而已。

🐶1_bit：看來鍛煉了一下熟練了。

👸小媛：都是重復的內容，真好用 IVX。

🐶1_bit：繼續講怎么做吧。

👸小媛：接下來就一個行2個元素就ok了。

👸小媛：再復制這個列就完成了，輕輕松松，簡簡單單。

🐶1_bit：那你再試試右側那一欄吧，其實就是一個行里面，左側是一個行，右側一個行，左側是圖片右側是文字。

👸小媛：真的簡單，設置好占比百分比就可以了。

👸小媛：然后多復制幾份，改一下頭像就可以了。

🐶1_bit：那底部內容呢？

👸小媛：底部內容直接一個文本，復制進去就可以了。 😎

🐶1_bit：可以的，挺聰明的，哈哈哈，預覽進行下載到本地就可以交作業了。

👸小媛：完美。 😎