iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 1289 瀏覽

鐵人賽 Modern Web DAY 24

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 25 篇

技術 #23 CSS 邏輯屬性 Logical properties 與 Writing modes

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-10-09

0 Like 2 留言 3041 瀏覽

鐵人賽 Modern Web DAY 23

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 24 篇

技術 #22 CSS display: contents：讓你變成小透明，製作 JS Components 時的好東西！

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 d...

Eva Chen ‧ 2023-10-08

0 Like 0 留言 1988 瀏覽

鐵人賽 Modern Web DAY 22

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 23 篇

技術 #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 5...

Eva Chen ‧ 2023-10-07

0 Like 0 留言 1375 瀏覽

鐵人賽 Modern Web DAY 21

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 22 篇

技術 #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 3...

Eva Chen ‧ 2023-10-06

0 Like 2 留言 4705 瀏覽

鐵人賽 Modern Web DAY 20

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 21 篇

技術 #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學習 G...

Eva Chen ‧ 2023-10-05

0 Like 0 留言 2219 瀏覽

鐵人賽 Modern Web DAY 19

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 20 篇

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 F...

Eva Chen ‧ 2023-10-04

0 Like 0 留言 2688 瀏覽

鐵人賽 Modern Web DAY 18

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 19 篇

技術 #17 CSS block、inline、inline-block：網頁排版的御三家

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解網頁上...

Eva Chen ‧ 2023-10-03

0 Like 0 留言 1798 瀏覽

鐵人賽 Modern Web DAY 17

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 18 篇

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解四個實...

Eva Chen ‧ 2023-10-02

2 Like 0 留言 2460 瀏覽

鐵人賽 Modern Web DAY 16

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 17 篇

技術 #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解好用的...

Eva Chen ‧ 2023-10-01

0 Like 0 留言 380 瀏覽

鐵人賽 Modern Web DAY 21

打造你的第一個網站系列第 21 篇

技術第二十一天-CSS定位進階範例(二)

如何讓card的三個button在平常的時候不出現，hover的時候才出現呢?所有的程式碼都照著上述打，修改的部分如下: .card-btns { po...

ThisIsFrankTsai ‧ 2023-10-01

0 Like 0 留言 2938 瀏覽

鐵人賽 Modern Web DAY 15

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 16 篇

技術 #14 Reset CSS！變回你該有的樣子

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-09-30

0 Like 0 留言 1057 瀏覽

鐵人賽 Modern Web DAY 14

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 15 篇

技術 #13 CSS 盒子模型 (Box Model)：border-box & content-box

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解網頁...

Eva Chen ‧ 2023-09-29

0 Like 0 留言 546 瀏覽

鐵人賽 Modern Web DAY 18

打造你的第一個網站系列第 18 篇

技術第十八天-CSS 定位模式(一)

第十八天 CSS定位模式Position 有五種方向:top、bottom、left、right、z-index,這五種方向分別指:Top:由上往下推多少px。...

ThisIsFrankTsai ‧ 2023-09-28

0 Like 0 留言 1468 瀏覽

鐵人賽 Modern Web DAY 13

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 14 篇

技術 #12 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 CS...

Eva Chen ‧ 2023-09-28

0 Like 0 留言 2353 瀏覽

鐵人賽 Modern Web DAY 11

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 12 篇

技術 #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解如何...

Eva Chen ‧ 2023-09-26

0 Like 0 留言 390 瀏覽

鐵人賽影片教學 DAY 10

一起來實作響應式網頁設計系列第 10 篇

技術一起來實作響應式網頁設計：CSS外觀屬性 Day10

影片教學重點回顧 color: 色彩名稱 | rgb(rr,gg,bb) | #rrggbb | rgba(rr,gg,bb,alpha) opacity...

coding19 ‧ 2023-09-25

0 Like 1 留言 1446 瀏覽

鐵人賽 Modern Web DAY 10

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 11 篇

技術 #09 原生的 CSS 變數，基本與進階應用

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解如何設...

Eva Chen ‧ 2023-09-25

0 Like 0 留言 441 瀏覽

鐵人賽 Modern Web DAY 15

打造你的第一個網站系列第 15 篇

技術第十五天-CSS顯示差異

CSS顯示模式差異(1):在HTML中我們依照版面顯示方式，將標籤分為三種類型，1.區塊元素(block):例如: h1~h6,div,section,head...

ThisIsFrankTsai ‧ 2023-09-25

0 Like 0 留言 441 瀏覽

鐵人賽 Modern Web DAY 15

打造你的第一個網站系列第 15 篇

技術第十五天-CSS顯示差異

CSS顯示模式差異(1):在HTML中我們依照版面顯示方式，將標籤分為三種類型，1.區塊元素(block):例如: h1~h6,div,section,head...

ThisIsFrankTsai ‧ 2023-09-25

0 Like 0 留言 440 瀏覽

鐵人賽 Modern Web DAY 14

打造你的第一個網站系列第 14 篇

技術第十四天-CSS 跑版問題

重新認識邊框: 跑版問題在我的範例中，我們使用選擇器將box的邊框設計為400px，但是由於我們設計了border的關係這使得我們的total 的width為b...

ThisIsFrankTsai ‧ 2023-09-24

0 Like 1 留言 1870 瀏覽

鐵人賽 Modern Web DAY 9

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 10 篇

技術 #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 CS...

Eva Chen ‧ 2023-09-24

0 Like 0 留言 613 瀏覽

鐵人賽影片教學 DAY 8

一起來實作響應式網頁設計系列第 8 篇

技術一起來實作響應式網頁設計：CSS字型屬性 Day8

影片教學重點回顧嗨!大家好，先前的影片已經簡單介紹CSS撰寫的語法以及選擇器的種類，今天將要針對字型的屬性去進行設定。首先是字型部分，在font-fam...

coding19 ‧ 2023-09-23

0 Like 1 留言 1046 瀏覽

鐵人賽 Modern Web DAY 8

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 9 篇

技術 #07 CSS 基本語法 & 權重介紹

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-09-23

0 Like 0 留言 2129 瀏覽

鐵人賽 Vue.js DAY 8

Vue3歡樂套件箱耶系列第 8 篇

技術開箱8:RWD斷點設計大公開~TailwindCSS設定範例

本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都...

切版姐姐 ‧ 2023-09-23

0 Like 0 留言 373 瀏覽

鐵人賽影片教學 DAY 6

一起來實作響應式網頁設計系列第 6 篇

技術一起來實作響應式網頁設計：認識CSS Day6

影片教學重點回顧 CSS如同其名，可以串接不同元素，串接不同的屬性及其對應的值。撰寫方式可以如下 head 內撰寫 <head> &lt...

coding19 ‧ 2023-09-21

0 Like 0 留言 339 瀏覽

鐵人賽 Modern Web DAY 13

打造你的第一個網站系列第 13 篇

技術第十三天-CSS階層選擇器

接下來我們介紹CSS階層選擇器，與之前的屬性的優先權高低有所不同。我們直接上範例，在我的body之中我們先上code: <h3>我是...

ThisIsFrankTsai ‧ 2023-09-23

0 Like 0 留言 472 瀏覽

鐵人賽 Modern Web DAY 12

打造你的第一個網站系列第 12 篇

技術第十二天-FontAwesome申請教學

除了normailze之外，這邊另外推薦一個css的函式庫 FontAwesome在這裡你可以找到各式各樣的小圖示，增加我們HTML的美觀，雖然有些需要付費，...

ThisIsFrankTsai ‧ 2023-09-22

0 Like 0 留言 639 瀏覽

鐵人賽 Modern Web DAY 11

打造你的第一個網站系列第 11 篇

技術第十一天-更精緻的CSS

為了使我們的Card更精緻，我們可以在.card{}中加入 box-shadow: 5px 5px 8px rgb(156, 153, 153); 這行可以使...

ThisIsFrankTsai ‧ 2023-09-21

0 Like 0 留言 1015 瀏覽

鐵人賽 Modern Web DAY 6

連我阿公都會-手把手教你架網站系列第 6 篇

技術【Day06】前端撰寫（3）CSS基本樣式

在上一篇中，我們學習了如何選擇並指定我們所需的元件並對其進行客製化。本篇我們來將淺談一些CSS基本、又好用的樣式，了解這些屬性，保證能讓您在網頁設計上更加得心應...

ttdragon0722 ‧ 2023-09-21 ‧團隊最強資工大電神

0 Like 0 留言 664 瀏覽

鐵人賽 Modern Web DAY 10

打造你的第一個網站系列第 10 篇

技術第十天-消除留白的方法

昨天的文章我們有提到留白的部分，但是不是所有的留白都是我們要的，我們可以使用Google瀏覽器的開發人員工具去找出我們不想要的留白，這時為了要消除它，我們回到C...

ThisIsFrankTsai ‧ 2023-09-20

技術 #23 CSS 邏輯屬性 Logical properties 與 Writing modes

技術 #22 CSS display: contents：讓你變成小透明，製作 JS Components 時的好東西！

技術 #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

技術 #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

技術 #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

技術 #17 CSS block、inline、inline-block：網頁排版的御三家

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

技術 #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

技術 第二十一天-CSS定位進階範例(二)

技術 #14 Reset CSS！變回你該有的樣子

技術 #13 CSS 盒子模型 (Box Model)：border-box & content-box

技術 第十八天-CSS 定位模式(一)

技術 #12 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

技術 #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

技術 一起來實作響應式網頁設計：CSS外觀屬性 Day10

技術 #09 原生的 CSS 變數，基本與進階應用

技術 第十五天-CSS顯示差異

技術 第十五天-CSS顯示差異

技術 第十四天-CSS 跑版問題

技術 #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

技術 一起來實作響應式網頁設計：CSS字型屬性 Day8

技術 #07 CSS 基本語法 & 權重介紹

技術 開箱8:RWD斷點設計大公開~TailwindCSS設定範例

技術 一起來實作響應式網頁設計：認識CSS Day6

技術 第十三天-CSS階層選擇器

技術 第十二天-FontAwesome申請教學

技術 第十一天-更精緻的CSS

技術 【Day06】前端撰寫（3）CSS基本樣式

技術 第十天-消除留白的方法

標記使用者

技術第二十一天-CSS定位進階範例(二)

技術第十八天-CSS 定位模式(一)

技術一起來實作響應式網頁設計：CSS外觀屬性 Day10

技術第十五天-CSS顯示差異

技術第十五天-CSS顯示差異

技術第十四天-CSS 跑版問題

技術一起來實作響應式網頁設計：CSS字型屬性 Day8

技術開箱8:RWD斷點設計大公開~TailwindCSS設定範例

技術一起來實作響應式網頁設計：認識CSS Day6

技術第十三天-CSS階層選擇器

技術第十二天-FontAwesome申請教學

技術第十一天-更精緻的CSS

技術【Day06】前端撰寫（3）CSS基本樣式

技術第十天-消除留白的方法