iT邦幫忙

鐵人檔案

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

從零開始學習前端 系列

將在這短短幾個月的學習做個紀錄。每天會分享自學習以來每一週遇到的問題,而自己又是怎麼解決。主要會繞著HTML,CSS實踐上碰到的問題,也會有一些個人心得和思考。

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

#從零開始0️⃣:前言

關於這個系列 將在這短短幾個月的學習做個紀錄。每天會分享自學習以來遇到的幾個問題和解方。 主要會繞著HTML,CSS實踐上碰到的問題,也會有一些個人心得和思考。...

2023-09-16 ‧ 由 RochelWang 分享
DAY 2

#從零開始1️⃣:為什麼一定要寫html:5

不論是用freeCodeCamp學習還是其他管道學習,一開始都從學習標籤如何使用。我們也一定會注意到,這些都是寫在如附圖中的body標籤中。 那在body之外...

2023-09-17 ‧ 由 RochelWang 分享
DAY 3

#從零開始2️⃣:區塊標籤和行內標籤

為甚麼要分成區塊標籤和行內標籤 區塊標籤會佔據一整行或一個完整的區域,行內標籤只佔據它們實際內容所需的空間。 那有沒有辨別的方法? 區塊標籤是用於定義網頁的主要...

2023-09-18 ‧ 由 RochelWang 分享
DAY 4

#從零開始3️⃣:引用外部資源-link

接續第一篇#從零開始1️⃣:為什麼一定要寫html:5,我們知道了html:5裡各行的意思,在head這一區塊,也是我們幫html套上美美的外觀、引入CSS的地...

2023-09-19 ‧ 由 RochelWang 分享
DAY 5

#從零開始4️⃣:使用CSS Reset & CSS Normalize

CSS Reset:清掉所有預設樣式 CSS Reset 是一種可以清除所有預設樣式的方法,讓我們可以從頭開始自訂樣式。也就是會將所有 HTML 元素的邊距、填...

2023-09-20 ‧ 由 RochelWang 分享
DAY 6

#從零開始5️⃣:使用padding和margin

在了解基本的標籤後,就可以開始組合使用,來呈現出網頁的區塊。 這些區塊中,我們會需要根據需求(或是設計稿),來調整每個標籤元素樣式(包含顏色、字體、字型大小等...

2023-09-21 ‧ 由 RochelWang 分享
DAY 7

#從零開始6️⃣:box-sizing圖解

為了要讓各個區塊、內容外觀符合設計稿或者更好看,計算每個樣式帶來的影響和結果,有的時候也是很煩(算錯的時候更煩),這個時候box-sizing就派上用場了! b...

2023-09-22 ‧ 由 RochelWang 分享
DAY 8

#從零開始7️⃣:樣式對標籤無效? 非替換元素及替換元素

以為對標籤、樣式越來越熟悉之後,就會海闊天空、一路順遂(理想),但某天遇到了一個情況(實在是令人煩躁),情況如下:我想對label設定margin-top,但無...

2023-09-23 ‧ 由 RochelWang 分享
DAY 9

#從零開始8️⃣:比較inline-block、inline和block

上一篇說了替換元素和非替換元素,接著這篇想要整理和比較inline-block、inline和block。 定義 inline-block: inline-bl...

2023-09-24 ‧ 由 RochelWang 分享
DAY 10

#從零開始9️⃣:都只用div不行嗎? 為甚麼要用ul li語意化標籤

div超好用,甚麼情況下都可以用,但上了課後、網路上找了相關文章,得到的回饋都不建議這麼做。 關於div, Authors are strongly enco...

2023-09-25 ‧ 由 RochelWang 分享