iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30天每天寫網站 系列

30天期間堅持每天寫一點點網站
可能是重新撰寫舊作業網站,也可能寫新的~

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1-為小學生撰寫的網站小遊戲

今天要寫的是一個親戚請求幫忙的網站小遊戲主要是要給國小小朋友學習「小數點的加法」獲得的道具有,甜筒5個,冰淇淋9個希望的功能是讓小朋友能自由選擇甜筒,然後自行組...

DAY 2

Day2-為小學生撰寫的網站小遊戲_template精簡程式碼

昨天寫的小網站後續看文章時覺得有一部分JS有硬幹的嫌疑(?)所以把一些部分做了改動 首先使用了HTML 的 template元素將預想使用的程式碼寫入templ...

DAY 3

Day3-自製網站捲軸(上)_CSS就能做得到

這次要介紹如何「自製假捲軸」 前言//大學期間有一次網頁程式課程的作業需要仿製一個網站該網站的左導覽列內部有自己的捲軸其實一般網頁根據瀏覽器不同捲軸是可以用不同...

DAY 4

Day4-自製網站捲軸(中)_想要更多造型

今天開始來寫出自製的捲軸,構想是這樣子的根據構想先把框架寫出來 <div class="text_box "> <...

DAY 5

Day5-自製網站捲軸(下)_我就特立獨行

今天要介紹的是「如果我就想把捲軸放在不是最右邊的位置怎麼辦?」這是自製網站捲軸的最後一篇啦~我知道一般我們在設計網站時,會根據網站設計原則去做排版但有時候人就是...

DAY 6

Day6-網站閱讀進度條(上)_到底哪裡少算了

今天試著寫了在單頁式網頁側邊比較容易看到的「閱讀進度條」先看成品 總共會寫兩種方法 第一種首先先佈局如動圖所見,會需要有超過畫面高度的內文,這邊都用同樣大小的內...

DAY 7

Day7-網站閱讀進度條(下)_捲軸包捲軸

今天繼續說第二種方法第二種方法就是捲軸拉桿的概念了就像昨天說的,如果直接用做捲軸時的scale去做的話,會多出一塊像這樣所以在我想到「扣掉頁面」前我先想到的是「...

DAY 8

Day8-滾動視差(上)_前有文字

今天試著寫了滾動視差的網站滾動視差主要是靠東西不同的滾動速度來做到前後落差的感覺先看成品 先做最上面的文字跟刷子的部分 <div class="...

DAY 9

Day9-滾動視差(下)_後有圖樣

今天繼續說滾動視差球球的部分先在scroll_thing的下方加上球球的div <div class="paint_c paint_c1&quo...

DAY 10

Day10-舊網站重寫成Vue_1_收合式選單

今天開始來把這個我第一個網站寫成vue版本https://sweetyue9045.github.io/first/因為我才剛開始學Vue所以不確定會用幾天幾篇...