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

0 Like 0 留言 688 瀏覽

鐵人賽 Modern Web DAY 15

切版與CSS：打造工具箱與切版施工流程！系列第 15 篇

技術 Day15 CSS Display 屬性探勘摘要

display 屬性是一個極為重要且強大的屬性，它控制著元素在網頁中的呈現方式。這次要搭配的是CSS Display Module Level 3以下為部分摘要...

Jessie ‧ 2023-09-30 ‧團隊好想工作室 v7.0

0 Like 0 留言 489 瀏覽

鐵人賽 Modern Web DAY 19

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

技術第十九天-CSS 定位練習(二)

了解了昨天的定位之後，今天我們做一個小練習，如何讓兩個方塊重疊呢? HTML程式碼我們這樣打: ⋮ <h3>...

ThisIsFrankTsai ‧ 2023-09-29

0 Like 0 留言 1025 瀏覽

鐵人賽 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 留言 1562 瀏覽

鐵人賽 Modern Web DAY 13

切版與CSS：打造工具箱與切版施工流程！系列第 13 篇

技術 Day13 CSS Transition 過渡變變變

記得初次接觸Transition，是要做個畫面效果，搞了老半天，差點....不做了（還是有生出來），這是要搭配服用『熱騰騰』的W3C CSS Transitio...

Jessie ‧ 2023-09-28 ‧團隊好想工作室 v7.0

0 Like 0 留言 1408 瀏覽

鐵人賽 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 留言 1536 瀏覽

鐵人賽 Modern Web DAY 12

切版與CSS：打造工具箱與切版施工流程！系列第 12 篇

技術 Day12 CSS Animation 探索動畫

初次碰CSS Animation是為了做出某動畫要求，然後饅頭對我說，以後JS有點什麼了，也盡可能用CSS實作動畫啊，當下的我想說，為傻？JS動畫庫這麼多，為何...

Jessie ‧ 2023-09-27 ‧團隊好想工作室 v7.0

1 Like 0 留言 1525 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 #11 開始寫 CSS 或程式必須知道的：DRY & KISS & YAGNI

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

Eva Chen ‧ 2023-09-27

0 Like 0 留言 560 瀏覽

鐵人賽影片教學 DAY 11

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

技術一起來實作響應式網頁設計：Box Model Day11

影片教學重點回顧 padding：content 與 border之間的距離 margin：元素間的距離 border：框出元素的範圍以上是今天的教...

coding19 ‧ 2023-09-26

0 Like 0 留言 469 瀏覽

鐵人賽 Modern Web DAY 11

切版與CSS：打造工具箱與切版施工流程！系列第 11 篇

技術 Day11 Visual Formatting Model淺談視覺格式化模型

記得初學的時候就讀了規範9 Visual formatting model，以至於懷疑CSS可不可以學起來？有了些實作經驗後，再回來看看，看看有什麼新發現！本次...

Jessie ‧ 2023-09-26 ‧團隊好想工作室 v7.0

0 Like 0 留言 2258 瀏覽

鐵人賽 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 留言 370 瀏覽

鐵人賽影片教學 DAY 10

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

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

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

coding19 ‧ 2023-09-25

0 Like 0 留言 534 瀏覽

鐵人賽 SideProject30 DAY 16

30天製作RWD個人品牌網站系列第 16 篇

技術 Day16. 切版前知識(六) CSS動畫 Animation

今天是CSS最後一章，最後來講講CSS動畫，運用CSS能夠製作一些基本的動畫，讓畫面更有趣！除了前面說過的transition屬性能利用過渡效果呈現簡單的小動畫...

luna0228 ‧ 2023-10-01

0 Like 0 留言 1207 瀏覽

鐵人賽 SideProject30 DAY 13

30天製作RWD個人品牌網站系列第 13 篇

技術 Day13. 切版前知識(三) CSS介紹、選擇器、常用屬性

嗨～從今天開始是一系列的CSS內容，前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁，並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀，Ja...

luna0228 ‧ 2023-09-28

0 Like 2 留言 868 瀏覽

鐵人賽 SideProject30 DAY 15

30天製作RWD個人品牌網站系列第 15 篇

技術 Day15. 切版前知識(五) CSS偽元素 ::before、::after

嗨～今天是第15天！終於一半啦！！！今天要來談談CSS的偽元素，有了偽元素讓元素能添加更多效果、變化，網頁設計也能更多樣，是很常用的設定之一。前面的天數有談到：...

luna0228 ‧ 2023-09-30

0 Like 0 留言 864 瀏覽

鐵人賽 SideProject30 DAY 14

30天製作RWD個人品牌網站系列第 14 篇

技術 Day14. 切版前知識(四) CSS進階屬性：Flexbox、transition、transform和更多

先祝大家中秋節快樂！雖然是休假，但鐵人賽不能休息啊嗚嗚不管怎麼說，還是趕快進入今天的內容吧～昨天談到CSS的基本認識並介紹了選擇器、常用屬性，忘記的記得回去看。...

luna0228 ‧ 2023-09-29

0 Like 0 留言 714 瀏覽

鐵人賽 Modern Web DAY 10

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

技術【Day10】前端撰寫（7）CSS框架

在前幾日中，我們總共講解了六篇CSS的基本屬性，內容之多，但都僅是蜻蜓點水的帶過而已，可見CSS的上限非常之高，學習它必然是一段漫長之路。以前在設計網頁時，我...

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

0 Like 0 留言 626 瀏覽

鐵人賽 Modern Web DAY 10

切版與CSS：打造工具箱與切版施工流程！系列第 10 篇

技術 Day10 Pseudo-偽兄弟 : 偽類Class與偽元素Element，傻傻分不清？

偽類與偽元素，很常讓人突然想不起誰是誰？好像是雙胞胎似的。剛開始學的時候真的頭很大，後來發現這兩位很不同功能啊，也聽說，2.2版本時，他們都是（:），都只有一個...

Jessie ‧ 2023-09-25 ‧團隊好想工作室 v7.0

0 Like 1 留言 1376 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

Eva Chen ‧ 2023-09-25

0 Like 0 留言 1123 瀏覽

鐵人賽 Modern Web DAY 9

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

技術【Day09】前端撰寫（6）淺談RWD響應式網頁設計

擷自 digitalsynopsis.com 在前面的篇章中，我們學習了如何撰寫CSS的各個屬性來設計出精美的網頁，但您是否有想過：「用電腦設計出來的網頁，為...

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

0 Like 0 留言 711 瀏覽

鐵人賽 Modern Web DAY 9

切版與CSS：打造工具箱與切版施工流程！系列第 9 篇

技術 Day09 CSS之夾娃娃機，選擇器Selector是什麼？

某次Code Review學長對我說，你知道選擇器嗎？我說大概知道。他說你要能夠做到我指哪個你就可以選到哪個，所以他就隨意指個地方，問我『你要怎樣才能選得到？』...

Jessie ‧ 2023-09-24 ‧團隊好想工作室 v7.0

0 Like 1 留言 1798 瀏覽

鐵人賽 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 留言 598 瀏覽

鐵人賽影片教學 DAY 8

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

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

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

coding19 ‧ 2023-09-23

0 Like 1 留言 990 瀏覽

鐵人賽 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 留言 1276 瀏覽

鐵人賽 Modern Web DAY 8

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

技術【Day08】前端撰寫（5）CSS Position

在上一篇中，我們提到了CSS中，快速排版向的屬性：display: flex 。但有時，flex並不適用於較小且單一的元件，也無法協助我們更精細地刻出我們所想要...

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

0 Like 0 留言 599 瀏覽

鐵人賽 Modern Web DAY 8

切版與CSS：打造工具箱與切版施工流程！系列第 8 篇

技術 Day08 Box Modle: Margin? Collapsing margins外距折疊？Padding?

初學時Margin、Padding傻傻分不清楚，心想反正畫面有就好了，被問了『你何時用Margin?何時用Padding?』，於是針對這個議題展開了追尋。這裡會...

Jessie ‧ 2023-09-23 ‧團隊好想工作室 v7.0

0 Like 0 留言 1060 瀏覽

鐵人賽 Modern Web DAY 7

切版與CSS：打造工具箱與切版施工流程！系列第 7 篇

技術 Day07 CSS區分大小寫嗎？談談CSS語法

我曾經在不同貼文上看見CSS區分大小寫，或CSS不區分大小寫的說法，也自己試試看過，有時可以，有時不可以，所以到底是怎樣呢？讓規範幫我們解謎吧！語法Synta...

Jessie ‧ 2023-09-22 ‧團隊好想工作室 v7.0

0 Like 0 留言 361 瀏覽

鐵人賽影片教學 DAY 6

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

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

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

coding19 ‧ 2023-09-21

0 Like 0 留言 708 瀏覽

鐵人賽 Modern Web DAY 6

了不起的 Svelte 系列第 6 篇

技術第 06 天：Svelte 中的 CSS

第 06 天：Svelte 中的 CSS 她就這麼大辣辣地走了進來，以一種檢視財產的姿態，將房間裡的 CSS 選擇器都看了個遍，讓我不禁思索她是否會干擾到他們...

ithomemhjao ‧ 2023-09-21

0 Like 0 留言 1011 瀏覽

鐵人賽 Modern Web DAY 7

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

技術【Day07】前端撰寫（4）CSS Flex屬性，並使用Flex做一個簡單頁尾（Footer）

在本篇中，我們將介紹CSS中的flex。如同它的名字flex般，這個屬性非常具有彈性，有著能夠適應各個網頁縮放比例的自適應能力，可以說是我們在做網頁設計中的排版...

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

0 Like 0 留言 974 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

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

技術 Day15 CSS Display 屬性探勘摘要

技術 第十九天-CSS 定位練習(二)

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

技術 Day13 CSS Transition 過渡變變變

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

技術 Day12 CSS Animation 探索動畫

技術 #11 開始寫 CSS 或程式必須知道的：DRY & KISS & YAGNI

技術 一起來實作響應式網頁設計：Box Model Day11

技術 Day11 Visual Formatting Model淺談視覺格式化模型

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

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

技術 Day16. 切版前知識(六) CSS動畫 Animation

技術 Day13. 切版前知識(三) CSS介紹、選擇器、常用屬性

技術 Day15. 切版前知識(五) CSS偽元素 ::before、::after

技術 Day14. 切版前知識(四) CSS進階屬性：Flexbox、transition、transform和更多

技術 【Day10】前端撰寫（7）CSS框架

技術 Day10 Pseudo-偽兄弟 : 偽類Class與 偽元素Element，傻傻分不清？

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

技術 【Day09】前端撰寫（6）淺談RWD響應式網頁設計

技術 Day09 CSS之夾娃娃機， 選擇器Selector是什麼？

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

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

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

技術 【Day08】前端撰寫（5）CSS Position

技術 Day08 Box Modle: Margin? Collapsing margins外距折疊？Padding?

技術 Day07 CSS區分大小寫嗎？談談CSS語法

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

技術 第 06 天：Svelte 中的 CSS

技術 【Day07】前端撰寫（4）CSS Flex屬性 ，並使用Flex做一個簡單頁尾（Footer）

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

標記使用者

技術第十九天-CSS 定位練習(二)

技術一起來實作響應式網頁設計：Box Model Day11

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

技術【Day10】前端撰寫（7）CSS框架

技術 Day10 Pseudo-偽兄弟 : 偽類Class與偽元素Element，傻傻分不清？

技術【Day09】前端撰寫（6）淺談RWD響應式網頁設計

技術 Day09 CSS之夾娃娃機，選擇器Selector是什麼？

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

技術【Day08】前端撰寫（5）CSS Position

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

技術第 06 天：Svelte 中的 CSS

技術【Day07】前端撰寫（4）CSS Flex屬性，並使用Flex做一個簡單頁尾（Footer）

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