iT邦幫忙

鐵人檔案

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

清空我的最愛之前端筆記 系列

最近發現我的書籤裡,有許多從 0 開始學習程式開發時查過的資料,當時是想著以後再細看,不料懶人癌一直好不了,我想趁這個機會,清空我的書籤,並建立筆記。查的資料大多是關於 HTML、CSS、JavaScript,還有與前端有關的內容。

參賽天數 15 天 | 共 16 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

[ Day 1 ] [ CSS ] 如何改變 Background Image 背景圖片的不透明度

大家都知道,如果想要設定圖片的不透明度,可以使用 opacity 來調整。首先,先簡單介紹 opacity 的語法。 opacity 語法 opacity: 0...

2022-09-15 ‧ 由 Daisy 分享
DAY 2

[ Day 2 ] [ JS ] 產生大小寫字母、隨機字母、隨機 6 位密碼

今天想跟大家分享的是基礎的 JavaScript,會複習到 String 的一些方法。 String Methods String.fromCharCode()...

2022-09-16 ‧ 由 Daisy 分享
DAY 3

[ Day 3 ] [ CSS ] - Flexbox 與 absolute positioning

今天是第三天,想跟大家分享的是,在之前的某次練習中,有發現到在 display: flex 的狀態下,如果把某個 flex item 設定 position:...

2022-09-17 ‧ 由 Daisy 分享
DAY 4

[ Day 4 ] [ HTML ] - <head> 標籤裡的內容

今天想整理記錄 &lt;head&gt; 裡可以放的標籤以及內容。 這是一份常見的 HTML 文件, &lt;!DOCTYPE html&gt; &lt;htm...

2022-09-18 ‧ 由 Daisy 分享
DAY 5

[ Day 5 ] [ CSS ] - Pseudo-classes 偽類 (1)

今天是第五天,翻了一下我的最愛,其中有個書籤存了 Pseudo-classes 偽類,所以今天來整理有哪些 Pseudo-classes 偽類囉! Pseudo...

2022-09-19 ‧ 由 Daisy 分享
DAY 6

[ Day 6 ] [ CSS ] - Pseudo-classes 偽類 (2)

大家好,接續昨天的介紹... Structural pseudo-classes 這些偽類與 document tree 的位置有關。index 是從 1 開始...

2022-09-20 ‧ 由 Daisy 分享
DAY 7

[ Day 7 ] [ CSS ] - 常見的水平置中、垂直置中方法

今天是第 7 天,想來整理並跟大家分享實作水平置中與垂直置中的方法~~ # 水平置中 Inline 元素、Inline-* 元素 在父元素設定 text-ali...

2022-09-21 ‧ 由 Daisy 分享
DAY 8

[ Day 8 ] [ JS ] for..in 與 for...of 的區別

今天是第 8 天,大家都知道跑迴圈的寫法,像是 for loop、forEach 等等,其中有兩個長得很像的 for..in 與 for...of,一開始很容易...

2022-09-22 ‧ 由 Daisy 分享
DAY 9

[ Day 9 ] [ CSS ] Pseudo-elements 偽元素 (1)

今天是第 9 天,因為前幾天寫了偽類,所以今天就順便來整理偽元素囉! Pseudo-elements 偽元素 偽元素是在畫面上看起來有這個元素,但是實際上卻不是...

2022-09-23 ‧ 由 Daisy 分享
DAY 10

[ Day 10 ] [ CSS ] Pseudo-elements 偽元素 (2)

今天是第 10 天,已經完成 1 / 3 了!(鼓掌)今天接續昨天整理的 Pseudo-elements 偽元素 ~~ content 屬性 應用在 ::bef...

2022-09-24 ‧ 由 Daisy 分享