iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

網站主題切換功能 系列

在這30天中,我將會使用CSS、JavaScript去嘗試製作一個可以切換主題的網站,讓使用者可以在不同的外觀風格之間進行切換。

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

Day1:前言與準備工作

前言 大家好,我是一名目前就讀資訊相關科系的學生。這是我第一次參加鐵人賽,之前主要是閱讀他人的文章,但這次我終於下定決心參加鐵人賽。連續30天寫文章是一項我從未...

2023-09-11 ‧ 由 May0240 分享
DAY 2

Day2:完成網站佈局

在今天的文章中,我們將開始建立我們的待辦事項網站。首先,讓我們一起看一下我為這個網站繪製的簡易示意圖,以了解它的大致外觀: Layout 我計劃將這個網站分為三...

2023-09-12 ‧ 由 May0240 分享
DAY 3

Day3:製作待辦事項的HTML與CSS

前言 在今天的任務中,我將專注在處理待辦事項的外觀,主要聚焦在HTML架構和CSS樣式的編寫。 HTML與CSS的調整 首先,我進行了一些調整,以下是我做的修改...

2023-09-13 ‧ 由 May0240 分享
DAY 4

Day4:處理待辦事項的JS邏輯(1)

前言 在今天的任務中,我將專注於處理待辦事項清單的JavaScript部分,讓整個待辦事項清單更具互動性。我今天的目標是實現以下功能: 動態添加待辦事項項目...

2023-09-14 ‧ 由 May0240 分享
DAY 5

Day5:處理待辦事項的JS邏輯(2)

前言 在今天的任務中,我將繼續解決待辦事項清單其他的JavaScript細節問題。我今天的目標是實現以下功能: 勾選checkbox時,更改<p>...

2023-09-15 ‧ 由 May0240 分享
DAY 6

Day6:切換主題背景色(1)

前言 今天的任務是實現切換亮色主題的背景顏色功能。 選擇合適的背景色 在開始撰寫程式之前,我想先向大家推薦一個線上色彩調色板收集網站,它的名字叫做 Color...

2023-09-16 ‧ 由 May0240 分享
DAY 7

Day7:淺談 SCSS

前言 今天我要介紹一個特別的主題,那就是將我的 CSS 程式碼轉換成 SCSS 程式碼。我會介紹 SCSS 是因為我發現 CSS 程式碼變得太過冗長了,每次要找...

2023-09-17 ‧ 由 May0240 分享
DAY 8

Day8:切換主題背景色(2)

前言 今天的目標是完成切換網站主題的背景色功能。 切換背景色 我的目標是提供四種不同的主題背景色選單,包括預設背景色、亮色背景色、夜間背景色和自然背景色。 首先...

2023-09-18 ‧ 由 May0240 分享
DAY 9

Day9:優化主題切換的CSS

前言 今天的目標是對 CSS 樣式進行優化。在昨天完成剩餘主題背景切換功能之後,我注意到 <aside> 元素內的 <ul> 清單和 &...

2023-09-19 ‧ 由 May0240 分享
DAY 10

Day10:網頁主題預覽

前言 今天我將嘗試實現主題預覽功能,讓使用者能更直觀地了解各個主題的外觀差異。當使用者將游標停留在主題切換選單上時,將會顯示出相對應主題的預覽畫面。 html2...

2023-09-20 ‧ 由 May0240 分享