鐵人檔案
這個系列將以我喜歡的歌手為主題，透過 HTML、CSS、JavaScript 與 jQuery 等技術，製作一個專屬的歌手介紹網頁。內容將涵蓋：歌手基本資訊、專輯與歌曲列表、隨機播放歌曲、互動式元素，以及簡單的前端美化與動畫效果。
同時，在實作的過程中，我會每天記錄學到的知識點、遇到的問題與解決方式，並整理成技術分享文章，讓讀者不僅能看到成果，也能學習網頁開發的基礎與實務技巧。
大家好，我是一名大三學生，今天正式踏上 IT 鐵人賽 30 天挑戰的旅程！這次我選擇的主題是 「打造專屬於歌手的音樂資訊網頁」。或許你會好奇，為什麼不是做一個大...
今天要來分享 HTML 的基礎，因為它是整個網站的「骨架」。如果把網站比喻成人體，HTML 就像是骨頭，支撐整個結構；CSS 是外表的服裝與裝飾；JavaScr...
昨天有了 HTML 骨架，但如果只有純文字，網頁看起來就像是一份黑白文件。今天要來學的是 CSS（Cascading Style Sheets），它負責「美化網...
今天繼續製作我的專案網頁首頁，主題是介紹我最喜歡的歌手 Keshi（凱西）。在這個初版雛形中，我先建立了基本的 HTML 結構，並把歌手的介紹內容填寫進去，確保...
昨天完成了基本的網頁版型，今天要來做一個小小的互動：按鈕切換頁面內容。這個功能常見於網頁中，例如：商品頁面切換「介紹 / 評價」、音樂網站切換「歌手 / 專輯」...
前幾天有用過 text-align: center; 或 margin 來做排版，但如果頁面有很多元素，這些基礎方式會變得很難控制。這時候就需要 Flexbox...
昨天完成了切換按鈕和 JavaScript 的互動功能，今天要讓網頁更豐富： 為原本的網頁首頁加上圖片，使網頁不會太單調，也讓觀眾知道Keshi本人的模樣。...
昨天我已經在首頁加上了 Banner 圖片，今天我想進一步讓它更動態。 我想要的效果是：當頁面往下滑動時，Banner 圖片會慢慢淡出；往回滑時，圖片又會恢復原...
今天要在網頁上建立 Music 專輯展示區，因為之前只有文字，我想讓畫面更美觀，也讓使用者知道專輯的樣子，所以想讓專輯變成圖片的形式橫向滑動展示，未來也會製作點...
今天要繼續完成專輯展示區滑動的效果 接續作天的CSS: 5.左右滑動箭頭 position: absolute：固定在輪播區兩側。 :disabled：...
