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

0 Like 1 留言 4653 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

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

Eva Chen ‧ 2023-10-10

0 Like 0 留言 925 瀏覽

鐵人賽 Modern Web DAY 25

不用庫也能酷 - 玩轉 CSS & Js 特效系列第 25 篇

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。原理和 Day14 今天我想來點… 純 CSS 的開關一樣，都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

毛哥EM ‧ 2023-10-09

0 Like 0 留言 1489 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day24 預處理器 SASS，我們是朋友嗎？

初次接觸 SASS（Syntactically Awesome Style Sheets）時，可能只有一頁設計稿，並且沒有特別感受到它的威力。相反地，花了很多時...

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

0 Like 1 留言 1240 瀏覽

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

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

鐵人賽 Modern Web DAY 23

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

技術 Day23 路上的朋友，UI Framework

UI Framework，(User Interface Framework)，是為開發者提供了預設的 HTML、CSS 和 JavaScript 元件，以快速...

Jessie ‧ 2023-10-08 ‧團隊好想工作室 v7.0

0 Like 0 留言 2447 瀏覽

鐵人賽自我挑戰組 DAY 27

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列第 27 篇

技術【Day27】ChatGPT請教教我：React進階（五）- Style管理！styled-components！

各位，從Day1至今為止，我們討論前端內容或React內容的時候幾乎沒有討論到要怎麼處理元件的樣式（Style）只在Day6輕描淡寫的提到css檔引入，以及在...

一宵三筵 ‧ 2023-10-11

0 Like 0 留言 1126 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 Day22 媒體查詢 Media Queries

繼上篇介紹 RWD，這篇來看看媒體查詢Media Queries Level 4（2021/12）目前為 W3C Candidate Recommendatio...

Jessie ‧ 2023-10-07 ‧團隊好想工作室 v7.0

0 Like 0 留言 1902 瀏覽

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

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

鐵人賽 Modern Web DAY 21

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

技術 Day21 響應式網頁設計(RWD)

Responsive web design (RWD) 響應式網頁設計是種解決『裝置範圍』和『裝置尺寸』的設計方法，無論內容是在平板電腦、手機、電視或手錶上查...

Jessie ‧ 2023-10-06 ‧團隊好想工作室 v7.0

0 Like 2 留言 4497 瀏覽

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

鐵人賽 Modern Web DAY 20

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

技術【Day20】常見切版應用（3-2）頁頂Header RWD實作

上一篇中我們完成了header的切版應用、介紹了錨點（Anchor）、還做了一點主頁面的切版：那我們接續上一篇的內容，而當我們使用手機裝置打開此網頁，會發現...

ttdragon0722 ‧ 2023-10-05 ‧團隊最強資工大電神

0 Like 0 留言 1643 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day20 HTML語意化標籤與SEO、無障礙，有關係？

剛開始HTML標籤認識沒幾個，只會簡單的，所以div很好用，不知道就給div在煩惱class要取什麼名字。然後有次Code Review被說好多div捏？心想為...

Jessie ‧ 2023-10-05 ‧團隊好想工作室 v7.0

0 Like 0 留言 1295 瀏覽

鐵人賽 Modern Web DAY 19

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

技術【Day19】常見切版應用（3-1）頁頂Header實作

在介紹完了前兩日的可滑動選單與彈跳視窗後，今天我們將要進入 ── 頁頂Header的實作。 header的詳細作用和規劃在我們的前導：《網頁的基礎設計理論》已有...

ttdragon0722 ‧ 2023-10-04 ‧團隊最強資工大電神

0 Like 0 留言 2147 瀏覽

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

鐵人賽 Modern Web DAY 19

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

技術 Day19 跑版＆切好寫好

什麼是跑版？跑版，簡單來說，畫面不是你預期，東西待在它不該待的地方，畫面不忍直視，有興趣可自行查詢關鍵字。事情是這樣得，隨著每次Code Review做調整後，...

Jessie ‧ 2023-10-04 ‧團隊好想工作室 v7.0

0 Like 0 留言 418 瀏覽

技術 6.整合CSS和html

一、導覽列(navbar)是網頁或應用程式界面中常見的一種元素，用於幫助使用者導航和定位到網站或應用的不同部分或功能。它通常位於網頁或應用的頂部或側邊，提供了一...

伍貳捌 ‧ 2023-10-04

0 Like 0 留言 367 瀏覽

技術 5.CSS(三)陰影、定位、文繞圖、超連結

(一)陰影(二) 定位、文繞圖一、定位1.一般定位position2.圖層定位利用到z-index屬性來設定元件層次，z-index 數字越大的在越上面，反之則...

伍貳捌 ‧ 2023-10-04

0 Like 0 留言 368 瀏覽

技術 4.CSS(二):色彩、背景/邊界、邊框

(三) 色彩、背景(四)邊界、邊框

伍貳捌 ‧ 2023-10-04

0 Like 0 留言 1482 瀏覽

鐵人賽 Modern Web DAY 18

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

技術【Day18】常見切版應用（2）彈跳視窗

您在瀏覽其他網站時，是否常常被突如其來的彈跳視窗惹到心煩呢？不論是廣告、強迫訂閱、最新資訊…等，網頁常常使用彈跳視窗來宣傳。雖然惱人，但無法否認使用者確實被吸引...

ttdragon0722 ‧ 2023-10-03 ‧團隊最強資工大電神

0 Like 0 留言 331 瀏覽

技術 3.CSS(一):選擇器/字型、文字

CSS串接樣式表，可控制版面位置、網頁配色以及產生文字與圖片特效(一) 在HTML文件裡面使用CSS樣式，有三種方式1.行內宣告:將CSS寫在html標記裡，&...

伍貳捌 ‧ 2023-10-03

0 Like 0 留言 2566 瀏覽

鐵人賽 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

1 Like 0 留言 1664 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day17 CSS命名，名字取好沒煩惱？

記得當初Code-Review常常被問為何這樣命名？於是展開對於命名的追尋啊～看似簡單的一個Class命名，往往會影響到整個網頁的可讀性、維護性，甚至可能引發不...

Jessie ‧ 2023-10-02 ‧團隊好想工作室 v7.0

0 Like 0 留言 1708 瀏覽

鐵人賽 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

0 Like 0 留言 615 瀏覽

鐵人賽 Modern Web DAY 17

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

技術【Day17】常見切版應用（1）可滑動的文章頁面

前些日子裡，我們將網頁三件套的基礎語法都大致講解完畢了，但理論往往是需要以實作結果去支持的，雖然有了計算機這一作品，但網頁中幾乎是用不到該功能 ── 所以本日的...

ttdragon0722 ‧ 2023-10-02 ‧團隊最強資工大電神

2 Like 0 留言 2305 瀏覽

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

鐵人賽 Modern Web DAY 16

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

技術 Day16 使用小工具Debug DevTools

當我正疑惑要不要寫篇時，想說這大家都應該都知道吧？但回想小白白如我，還真的不知道這玩意。以下分享是跟切版比較有關係，做個簡單介紹，細節的話可能夠出一個鐵人系列...

Jessie ‧ 2023-10-01 ‧團隊好想工作室 v7.0

0 Like 0 留言 411 瀏覽

鐵人賽 Modern Web DAY 20

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

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

如何讓愛心、讚、FB的button在右下角? 在這個案例中我們先寫HTML <section> <h1>進階定位...

ThisIsFrankTsai ‧ 2023-09-30

0 Like 0 留言 2853 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

Eva Chen ‧ 2023-09-30

技術 #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

技術 Day25 有料的 CSS 漢堡選單

技術 Day24 預處理器 SASS，我們是朋友嗎？

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

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

技術 Day23 路上的朋友，UI Framework

技術 【Day27】ChatGPT請教教我：React進階（五）- Style管理！styled-components！

技術 Day22 媒體查詢 Media Queries

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

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

技術 Day21 響應式網頁設計(RWD)

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

技術 【Day20】常見切版應用（3-2）頁頂Header RWD實作

技術 Day20 HTML語意化標籤與SEO、無障礙，有關係？

技術 【Day19】常見切版應用（3-1）頁頂Header實作

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

技術 Day19 跑版＆切好寫好

技術 6.整合CSS和html

技術 5.CSS(三)陰影、定位、文繞圖 、超連結

技術 4.CSS(二):色彩、背景/邊界、邊框

技術 【Day18】常見切版應用（2）彈跳視窗

技術 3.CSS(一):選擇器/字型、文字

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

技術 Day17 CSS命名，名字取好沒煩惱？

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

技術 【Day17】常見切版應用（1）可滑動的文章頁面

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

技術 Day16 使用小工具Debug DevTools

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

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

標記使用者

技術【Day27】ChatGPT請教教我：React進階（五）- Style管理！styled-components！

技術【Day20】常見切版應用（3-2）頁頂Header RWD實作

技術【Day19】常見切版應用（3-1）頁頂Header實作

技術 5.CSS(三)陰影、定位、文繞圖、超連結

技術【Day18】常見切版應用（2）彈跳視窗

技術【Day17】常見切版應用（1）可滑動的文章頁面

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