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

0 Like 0 留言 397 瀏覽

鐵人賽 Modern Web DAY 8

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 8 篇

技術 Day 8 - CSS Challenge #6：Profile卡片介面(上)

題目 CSS Challenge Day6 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-22

0 Like 0 留言 358 瀏覽

鐵人賽 Modern Web DAY 5

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 5 篇

技術 ID 選擇器-僅此一家，別無分號

ID 選擇器（ID Selectors）是根據元素上的 id 屬性值作為判斷依據，大小寫需相符。 id 其實就是「身分 Identity」的縮寫，同一個 id...

Lala Code ‧ 2024-09-19

1 Like 0 留言 290 瀏覽

鐵人賽 Modern Web DAY 7

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 7 篇

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

題目 CSS Challenge Day5 上面的圖是題目，而我們要做出幾乎一樣的樣子我做好的此題CSS Challeage解答前情提要上一集由於篇幅太長，...

hitomiyang ‧ 2024-09-21

0 Like 0 留言 196 瀏覽

鐵人賽自我挑戰組 DAY 3

30 Day CSS Challenge 系列第 4 篇

技術 Day 3 CSS Challenge Menu Icon

https://codepen.io/ericcai/pen/JjQqWNJ 第三天的挑戰是製作一個點擊後能夠變形的菜單圖標，主要使用了 CSS3 的動畫和過渡...

Eric ‧ 2024-09-19

0 Like 1 留言 273 瀏覽

鐵人賽 Modern Web DAY 6

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 6 篇

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

題目 CSS Challenge Day5 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-20

1 Like 0 留言 621 瀏覽

鐵人賽 Modern Web DAY 4

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 4 篇

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

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

Eva Chen ‧ 2024-09-18

0 Like 0 留言 336 瀏覽

鐵人賽 Modern Web DAY 21

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 21 篇

技術 Day 21 - CSS Challenge #12：翻譯插件模擬畫面(上)

題目 CSS Challenge Day12 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的temp...

hitomiyang ‧ 2024-10-05

0 Like 0 留言 373 瀏覽

鐵人賽 Modern Web DAY 4

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 4 篇

技術類選擇器-前端切版最常使用的選擇器，精準鎖定

上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！類選擇器（Class Selectors）是前端切版最常使用到的選擇器，...

Lala Code ‧ 2024-09-18

0 Like 1 留言 225 瀏覽

鐵人賽 Modern Web DAY 5

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 5 篇

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

題目 CSS Challenge Day4 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-19

0 Like 0 留言 237 瀏覽

鐵人賽自我挑戰組 DAY 3

30 Day CSS Challenge 系列第 3 篇

技術 Day 2 CSS Challenge linear-gradient transition

https://codepen.io/ericcai/pen/qBzgBRX 第二天的挑戰是製作一個有漸層變化效果的動畫，當滑鼠懸停時背景和文字顏色會隨之變化。...

Eric ‧ 2024-09-17

1 Like 0 留言 371 瀏覽

鐵人賽 Modern Web DAY 3

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 3 篇

技術元素選擇器-誰說標籤只是標籤

元素選擇器（Type Selectors）也可以稱作「標籤選擇器」。我們可以在 HTML 文件中，選擇任何的 HTML 元素，並對選中的標籤元素來處理樣式。不...

Lala Code ‧ 2024-09-17

0 Like 0 留言 312 瀏覽

鐵人賽 Modern Web DAY 4

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 4 篇

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

題目 CSS Challenge Day3 上面的圖是題目，題目本身是一個動態的由各種動畫組成的樣子，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的Cod...

hitomiyang ‧ 2024-09-18

0 Like 0 留言 759 瀏覽

鐵人賽 Modern Web DAY 3

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 3 篇

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

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

Eva Chen ‧ 2024-09-17

1 Like 0 留言 571 瀏覽

鐵人賽 Modern Web DAY 2

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 2 篇

技術通用選擇器-小朋友才做選擇，我全都要

通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。通用選擇器可以使用 * 符號來選取所有元素...

Lala Code ‧ 2024-09-16

0 Like 0 留言 436 瀏覽

鐵人賽 Modern Web DAY 3

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 3 篇

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

題目 CSS Challenge Day2 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-17

0 Like 0 留言 328 瀏覽

鐵人賽佛心分享-我的私藏工具箱 DAY 2

SUPER EASY CSS 前端切版百寶箱系列第 2 篇

技術 #01 前端支援度查詢：Can I Use / StatCounter / Can I email...

因為網頁的使用者可能使用各種裝置、各種瀏覽器瀏覽網頁，所以在開發前端時，要盡量讓網頁在所有情況下表現效果都一致。今天就分享很常見的查詢支援度的小工具，雖然應該...

Eva Chen ‧ 2024-09-16

0 Like 0 留言 441 瀏覽

鐵人賽 JavaScript DAY 2

歡迎參加我的原生JS畢業典禮系列第 2 篇

技術【Day1】JS同學你負責什麼？

說到前端、Web不外乎就會提到三巨頭HTML、CSS和JavaScript（JS），先跳脫專有名詞我們來發揮想像力，解釋這三種語言是如何彼此配合？假設你在台北...

ivytien ‧ 2024-09-16

0 Like 0 留言 499 瀏覽

鐵人賽 Modern Web DAY 8

從零開始：全端新手的困境與成長系列第 8 篇

技術 Day8 要開始寫程式了，但我對 CSS、TypeScript 和 HTML 不熟，怎麼辦？(上)

要開始開發程式啦！寫程式是一個令人很興奮的過程，但又充滿挑戰，尤其當你發現自己對一些核心技術不熟的時候，這種不確定性可能會讓你覺得很糟糕也很焦慮。HTML、CS...

Chiayu ‧ 2024-09-16

0 Like 0 留言 347 瀏覽

鐵人賽自我挑戰組 DAY 2

30 Day CSS Challenge 系列第 2 篇

技術 Day 1 CSS Challenge LOGO

https://codepen.io/pen?template=dyBqdBw 第一天的挑戰是切一個 CSS Challenge 100 Days 的 logo...

Eric ‧ 2024-09-16

0 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 1

一個人的朝聖：重啟對 CSS 的認識系列第 1 篇

技術 [前言] 重啟 CSS 朝聖之路

為什麽而寫『為自己、為有趣、為求知而寫』回顧在還沒成為工程師時，五個半月充實學習的路線圖：HTML -> CSS -> JS -> j...

shan33 ‧ 2024-09-15

0 Like 0 留言 637 瀏覽

鐵人賽 Modern Web DAY 2

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 2 篇

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

題目 CSS Challenge Day1 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-16

0 Like 1 留言 472 瀏覽

鐵人賽 Modern Web DAY 1

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 1 篇

技術 Day 1 - 一起來玩CSS Challenge吧

前言雖然我也不知道為什麼被抓來寫這次的鐵人，但因為我同事很熱血，加上他說沒有寫完的要被罰三杯（可能是雞可能是酒，也可能是雞加酒），所以我就來了。前陣子寫CSS...

hitomiyang ‧ 2024-09-15

1 Like 0 留言 449 瀏覽

鐵人賽 Modern Web DAY 1

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 1 篇

技術什麼是CSS選擇器? CSS選擇器如何應用

一個完整的網站由 HTML、CSS 和 JavaScript 三者協同運作，各司其職，缺一不可。HTML 負責網站的結構，CSS 負責視覺美感，而 JavaS...

Lala Code ‧ 2024-09-15

1 Like 0 留言 218 瀏覽

鐵人賽自我挑戰組 DAY 1

30 Day CSS Challenge 系列第 1 篇

技術 CSS Challenge 30 Days

為什麼會有這個挑戰？起初，這個挑戰的源頭是同事問我是否要參加今年的 IThome 鐵人賽。雖然我每年都有參加，但今年專案繁多，我一度猶豫不決。最終還是硬著頭...

Eric ‧ 2024-09-15

0 Like 0 留言 377 瀏覽

鐵人賽 Modern Web DAY 1

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 1 篇

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

參賽前言去年的鐵人賽雖然成功完賽了（Super Easy CSS，極度簡單），但是整個系列卻沒有完整，原來要讓人學會 CSS，30 天是不夠的呀！因為沒有預...

Eva Chen ‧ 2024-09-15

0 Like 0 留言 361 瀏覽

鐵人賽 Modern Web DAY 10

重新認識 FrontEnd 系列第 10 篇

技術 Day10：CSS 優化之 Reflow 和 Repaint

CSS 優化身為前端我們常會聽到 Clean Code 這個字眼，又或者是各種設計模式，但這些主要是針對 JavaScript 的內容，雖然也有人提到 CSS...

呆呆小將 ‧ 2024-08-15

0 Like 0 留言 414 瀏覽

鐵人賽 Modern Web DAY 9

重新認識 FrontEnd 系列第 9 篇

技術 Day9：CSS 要怎麼下

元素選取器在網頁中，無論是透過 JavaScript 或是 CSS 有一套共用的選取器，這邊挑些常見的來說吧 id 選取：在 id 前面加個 # 字號，#i...

呆呆小將 ‧ 2024-08-14

0 Like 0 留言 559 瀏覽

鐵人賽 Modern Web DAY 8

重新認識 FrontEnd 系列第 8 篇

技術 Day8: 現代的 CSS

CSS 是什麼階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用...

呆呆小將 ‧ 2024-08-13

0 Like 0 留言 1885 瀏覽

技術工作中自學至獨立完成系統項目(Eclipse Servlet) - ５

技術內容在資料傳輸前，有些相關的文件及當中的欄位、邏輯Annotation之類的必須要有，才能運作程式因此要先確認這些事情有沒有做 1. 在Servlet文件...

離開井底後嚇到的 IT 空友 ‧ 2024-05-31

3 Like 0 留言 1252 瀏覽

技術 CSS學習紀錄-09-會上癮的flex排版(上)

嗨嗨~我是914 今天來學習flex囉GOGOGO 今天到"那家"咖啡廳做事，不曉得大家484有來過~有推薦的咖啡廳好像也可以推推唷!今...

joycechou_914 ‧ 2024-05-27

技術 Day 8 - CSS Challenge #6：Profile卡片介面(上)

技術 ID 選擇器-僅此一家，別無分號

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

技術 Day 3 CSS Challenge Menu Icon

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

技術 Day 21 - CSS Challenge #12：翻譯插件模擬畫面(上)

技術 類選擇器-前端切版最常使用的選擇器，精準鎖定

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

技術 Day 2 CSS Challenge linear-gradient transition

技術 元素選擇器-誰說標籤只是標籤

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

技術 通用選擇器-小朋友才做選擇，我全都要

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

技術 #01 前端支援度查詢：Can I Use / StatCounter / Can I email...

技術 【Day1】JS同學你負責什麼？

技術 Day8 要開始寫程式了，但我對 CSS、TypeScript 和 HTML 不熟，怎麼辦？(上)

技術 Day 1 CSS Challenge LOGO

技術 [前言] 重啟 CSS 朝聖之路

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

技術 Day 1 - 一起來玩CSS Challenge吧

技術 什麼是CSS選擇器? CSS選擇器如何應用

技術 CSS Challenge 30 Days

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

技術 Day10：CSS 優化之 Reflow 和 Repaint

技術 Day9：CSS 要怎麼下

技術 Day8: 現代的 CSS

技術 工作中自學至獨立完成系統項目(Eclipse Servlet) - ５

技術 CSS學習紀錄-09-會上癮的flex排版(上)

標記使用者

技術類選擇器-前端切版最常使用的選擇器，精準鎖定

技術元素選擇器-誰說標籤只是標籤

技術通用選擇器-小朋友才做選擇，我全都要

技術【Day1】JS同學你負責什麼？

技術什麼是CSS選擇器? CSS選擇器如何應用

技術工作中自學至獨立完成系統項目(Eclipse Servlet) - ５