鐵人檔案
▍前言想要趁著暑假來寫一些東西，練習簡單的網頁製作，剛好可以透過鐵人賽來記錄，這個系列只用於紀錄自己的心路歷程，每天文章最後會附上參考資料或是我覺得有幫助的文章...
首先，建立一個repository用來儲存網頁的所有內容。建立完repository後新增檔案index.html，這時候到Settings>Pages&...
加入主畫面需要的幾個物件 <div class="mid-text"> <p class="wel-text...
加入目錄及選單 <input type="checkbox" id="click-menu" /> <...
昨天完成了點擊互動的目錄，不過選單直接出現有些突兀，所以今天給選單加上一個滑入動畫。 #click-menu:checked ~ * .list { ani...
昨天成功給選單加上滑動動畫了，不過用這個方式呈現會出現一個小瑕疵。左圖是我想達到的效果，如果動畫跑到一半，目錄又被點擊，選單從現在位置往回收起。右圖則是實際情況...
昨天我們讓目錄選單左右移動，成功達到預期的效果，不過這時候發現，畫面好像變寬了？如上圖所示，在目錄未被點擊時，選單會在視窗外，這時螢幕下方出現滾動條。不過我希望...
前幾天把目錄的動畫完成了，今天加上一點樣式和互動效果。:hover會在游標停留在物件上時觸發，改變物件的樣式，先給目錄加上一些樣式。 .menu{ padd...
主畫面已經大致完成了，今天開始製作介紹頁，首先加入需要的元素。 <div class="introduce-w"> <...
大致排好介紹頁的物件後，現在需要一個按鈕來前往介紹頁，把原本的標語改為按鈕。 <input type="checkbox" id=&q...
