疫情爆發的時候,多出了許多宅在家的時間,看新聞看得很厭煩,於是決定來學個新技能。
好奇心驅使下買了一堂關於網頁開發的線上課程,沒想到因為這個舉動,讓文組的我有了像是去異國旅行的新奇體驗。每當學到一個以前都不知道的知識時,都讓我覺得很有趣,原本一開始連HTML和CSS是什麼的我,漸漸地想要知道更多這方面的知識。
第一次知道鐵人賽,也是第一次參加鐵人賽,打算好好利用這30天把過去學過的內容整理得更清楚。
雖然覺得這件事跟連續30天運動的困難度不相上下,但不去嘗試怎麼知道自己有多少能耐、能堅持多久。
Flexbox的組成 Flexbox 是由外容器(flex container)與內元件(flex items)兩部份組成,如下圖 而外容器與內元件分別有不同的...
每次要用到絕對定位和相對定位時,我都會忘記他們分別代表的是什麼,又再google一次,這次決定好好把概念整理清楚,希望不要再混淆啦~ CSS Position屬...
Background包含哪些屬性? Background是縮寫,包含了以下幾個CSS屬性 background-color background-image...
剛開始學習的時候,我在font-family寫的值都只會設定一個,完全不知道需要加上通用字型,也不知道不同的作業系統會有不同的預設字型設定,看過一些資料後,才...
什麼是偽元素(Pseudo Element)? 偽元素就如同它的名字一樣,不是一個實際存在於網頁裡的元素,行為與表現卻又和真正網頁元素一樣,使用時必須搭配一個...
權重的概念讓我聯想到拍賣會,HTML元素的樣式就像是拍賣會上被競標的商品,而選擇器們就像是競標的買家一樣,只有出價最高的人才能獲得競標商品。 Cascadi...
在了解Media Queries的用法之前,先來了解一些RWD的觀念吧。 RWD是什麼? RWD是Responsive Web Design的縮寫,中文是翻譯...
還沒學到這個屬性之前,一直以為必須使用到JavaScript,才能讓網頁有動畫的效果,沒想到用CSS也可以做出動畫的效果。只要會運用transition和an...
設定transform屬性可以使文字或圖像有旋轉(rotate)、縮放(scale)、傾斜(skew)、移動(translate)這四種類型的變形效果。 tr...
CSS preprocessor(預處理器)是什麼? CSS 預處理器是個能透過使用預處理器語法,編譯產生純 CSS 的程式。要使用 CSS 預處理器,必需安...