iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0

今天繼續製作我的專案網頁首頁,主題是介紹我最喜歡的歌手 Keshi(凱西)。在這個初版雛形中,我先建立了基本的 HTML 結構,並把歌手的介紹內容填寫進去,確保整體架構完整。


我的 HTML 檔案包含以下幾個重要區塊:

1.標題與導覽列

在 h1 中,我放上了網頁的主標題「Keshi - 凱西」,讓訪客一進來就知道主題是誰。接著我利用 nav 標籤,建立了導覽列,裡面放置了連結到 YouTube、X、Instagram、Spotify、Apple Music 及 SoundCloud 的超連結。這樣用戶可以快速找到 Keshi 的社群與音樂平台。
程式碼:
https://ithelp.ithome.com.tw/upload/images/20250918/201683648ucxiHrPEk.png

2.歌手介紹與早年生活

我透過 h2 來做小節標題,例如「歌手介紹」、「早年生活」,並用 p 標籤填上段落文字。這樣可以保持結構清晰,也方便未來做排版或美化。
程式碼:
https://ithelp.ithome.com.tw/upload/images/20250918/20168364R9iEvQfSL5.png

3.音樂作品清單

在音樂作品部分,我使用 ul 與 li 來建立清單,列出 Keshi 的歷年專輯或 EP。這樣比單純用文字更有條理。
程式碼:
https://ithelp.ithome.com.tw/upload/images/20250918/20168364wndflGAsL1.png


執行後的結果:
https://ithelp.ithome.com.tw/upload/images/20250918/20168364GorTQ6Z1ZI.png
https://ithelp.ithome.com.tw/upload/images/20250918/201683641Kbq4CicaU.png

雖然這個版本還沒有太多 CSS 美化,但我已經把最基本的內容骨架做好了。接下來,我會逐步美化這個網頁,讓它更圍繞在Keshi身上。今天的重點在於把主要內容先落實,等基礎架構穩固後,再來進行視覺設計。


上一篇
CSS 基礎 – 網頁裝飾與美化
下一篇
用 JavaScript 製作「切換按鈕」功能
系列文
打造專屬於歌手的音樂資訊網頁:從零開始的前端實作與技術分享7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言