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

0 Like 0 留言 979 瀏覽

鐵人賽自我挑戰組 DAY 21

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 21 篇

技術 Day 21 RWD回應式設計

前言登登登登～～昨天剛完成一個簡易的HTML+CSS的網頁雛形結果…這時候有個問題出來那就是…如果當網頁換成平板試看或是手機的時候我昨天好不容易崩潰排好...

candy82202 ‧ 2022-10-06

0 Like 0 留言 977 瀏覽

鐵人賽 Modern Web DAY 13

喪屍黑白切系列第 13 篇

技術 Day 13 | 這個漢堡跟我想的不一樣

今天要來講響應式網頁出現頻率超高的漢堡選單啦，先來科普一下為什麼叫漢堡選單？照維基百科的說法，純粹就是覺得外觀長得跟漢堡相似（哪裡像），他有放一個對照圖，可以去...

Zombie@Dump ‧ 2020-09-28

2 Like 0 留言 975 瀏覽

鐵人賽 Modern Web DAY 24

重新認識 CSS 系列第 24 篇

技術重新認識 CSS - formatting context & independent formatting context

前言「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加...

Titangene ‧ 2019-10-09 ‧團隊好想工作室 v3.0

0 Like 0 留言 973 瀏覽

鐵人賽自我挑戰組 DAY 22

手刻武器庫，30 天前端學習心得系列第 22 篇

技術 Day 22：SVG Path 急速入門

組件實作：Demo 一、前言今天要來介紹的東西是「與繪畫相關的東西 - CSS 和 SVG」，CSS 來製作圖形是一件很常見的事情，至於為什麼會特別的提...

東尼先生 ‧ 2022-10-06

1 Like 0 留言 972 瀏覽

鐵人賽自我挑戰組 DAY 19

網頁學習雜記系列第 19 篇

技術 Day 19 | 不是那種網美濾鏡的 filter

今天想要來介紹一個 CSS 屬性 - filter，這個 filter 在想要做 png 的陰影的時候很好用，或是你想要讓彩色的照片變黑白 or 變懷舊，都可以...

Zombie@Dump ‧ 2020-10-04

0 Like 0 留言 971 瀏覽

鐵人賽 Modern Web

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

技術 #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

↓ 今日學習重點 ↓ 了解 hex、rgb()、cmyk()、hsl()、hsb() 了解廣色域是什麼了解 lch()、oklch() 與他們的...

Eva Chen ‧ 2023-10-25

0 Like 0 留言 971 瀏覽

鐵人賽 Modern Web DAY 9

30天數學老師作互動式教學網頁系列第 9 篇

技術 CSS的排版利器－Flexbox

昨天的程式碼已經用到了不少Flex來進行排版或是進行盒子上下及左右置中的工作，事實上，只要做網頁，很難避開Flex這個工具。利用margin來排定元素之間的相...

olddunk ‧ 2022-09-13

0 Like 0 留言 970 瀏覽

鐵人賽 Modern Web DAY 22

從零開始學 - Side Project專題開發及切版實作技巧系列第 22 篇

技術 Day 22- 開發環境架設(三) : Bootstrap 自訂基礎樣式

開發環境架設(三) : Bootstrap 自訂基礎樣式每日一談嗨，大家好 ! 我是阿蘇今天是day22 ，今天分享開發環境架設第三篇，我們來教大家如何...

阿蘇蘇 ‧ 2022-10-07 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 968 瀏覽

鐵人賽 Modern Web DAY 23

從零開始手刻網站，30 天打造我的前端武器庫系列第 23 篇

技術 Day 23：Image Overlay 組件實作

組件實作：Demo 一、前言 Image Overlay 指的是圖片上的覆蓋效果，我們要做的是：「使用滑鼠移動到圖片上，頁面會從四個方向來滑入頁面，像是從...

東尼先生 ‧ 2022-10-07

2 Like 0 留言 964 瀏覽

鐵人賽 Modern Web DAY 5

鉄人28号FX 系列第 5 篇

技術鉄人28号FX　鉄人5号「功能獸」Display vs Text typeface

★ 村外西南方樹林間 ↓↓↓ 顯示樹林位置圖 (☍﹏⁰。) 慌亂逃走樣）看來好像暫時逃脫了。咻～呼回過神後，目前在哪～）不管了，看紙條上有無提示：功能取向...

letter liu ‧ 2019-09-20 ‧團隊好想工作室 v3.0

2 Like 0 留言 961 瀏覽

技術 [快速入門前端 26] CSS Box Model 盒子模型

Box Model Box Model 其實就是把元素比喻為我們很常見的盒子，如下圖我們可以看到主要分為四個部分：盒子中的內容物 (電腦)、電腦與盒子間的空隙...

Doris ‧ 2023-06-07

1 Like 0 留言 959 瀏覽

技術 [快速入門前端 19] CSS 三大特性：層疊性、繼承性、優先級

層疊性當元素的樣式發生衝突時，瀏覽器會根據規則(權重)進行樣式層疊(覆蓋)。樣式衝突是指某元素特同個樣式名被設為不同值，例如一個元素同時擁有 color:...

Doris ‧ 2023-05-24

0 Like 0 留言 957 瀏覽

鐵人賽自我挑戰組 DAY 14

架站好好玩-Wordpress架站和SEO優化之學習全記錄系列第 14 篇

技術第14天:『WordPress架站第九步』-附加CSS設置社群連結Icon

WordPress架站-附加CSS設置社群Icon 一般經營網站,通常會在選單附近放上社群相關連結和Mail,這個一般有三種方法: 安裝社群連結的外掛軟體...

Cindy ‧ 2020-09-29

0 Like 1 留言 957 瀏覽

鐵人賽自我挑戰組 DAY 13

架站好好玩-Wordpress架站和SEO優化之學習全記錄系列第 13 篇

技術第13天:『WordPress架站第八步』-附加CSS調整標題字體樣式

WordPress架站-附加的CSS調整標題大小前一篇設定好分類之後,實際開啟文章分類的網頁,發現標題的字體太小,不管是電腦或是手機上閱讀都不太方便,於是開始...

Cindy ‧ 2020-09-28

1 Like 1 留言 953 瀏覽

鐵人賽自我挑戰組 DAY 10

每天來點 CSS Specification 系列第 10 篇

技術在看 Visual Formatting Model 之前，先說些別的～

倘若不斷向深處扎根，就能茁壯成長 - RM 前言在說明完 Box model 後，不意外地要開始講解到 Visual Formatting Model...

RURU Tseng ‧ 2019-09-25 ‧團隊好想工作室 v3.0

0 Like 0 留言 951 瀏覽

技術前端工程學習日記第４天

#使用 margin（向外）、padding（向內）來推擠距離css:.box{border:10px solid #000;padding-left:30p...

九四帥 ‧ 2020-11-05

0 Like 0 留言 950 瀏覽

鐵人賽 Modern Web DAY 11

從零開始學 - Side Project專題開發及切版實作技巧系列第 11 篇

技術 Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎

Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎每日一談嗨，大家好 ! 我是阿蘇今天是Day 11，不知不覺終於突破 Day10 啦 !...

阿蘇蘇 ‧ 2022-09-26 ‧團隊死線衝鋒 Deadline Squad

1 Like 1 留言 949 瀏覽

鐵人賽 Modern Web DAY 30

CSS 讓你的網頁動起來系列第 30 篇

技術 CSS微動畫 - 有始有終！心得跟最後動畫分享

Q: 第 30 天了，心中有沒有很興奮？A: 好緊張耶.. 最後一天了來個結語～～之前從來沒有想過要參加鐵人賽當初的對話是這樣的... 同事A：「走啊...

粒粒 ‧ 2021-10-08 ‧團隊神龍特攻隊 - it 宏的逆襲

2 Like 0 留言 946 瀏覽

鐵人賽自我挑戰組 DAY 28

網頁學習雜記系列第 28 篇

技術 Day 28 | Circular timer animation

今天要來分享我看 Youtube 影片做出來的 timer，照慣例先放影片連結，用他裡面提到的觀念延伸做出我這個 timer。 HTML <div cla...

Zombie@Dump ‧ 2020-10-13

1 Like 0 留言 945 瀏覽

鐵人賽 Modern Web DAY 25

HTML 與 CSS 學習筆記系列第 25 篇

技術 Day25 - CSS (6) - 漸層、權重

漸層 linear-gradient：漸層屬性，可以從 background 套用方向：預設未寫為上至下 to bottom，也可寫成角度，從上以 0...

hokou ‧ 2020-10-10

1 Like 0 留言 944 瀏覽

技術好想工作室 Web Camp 第 15 梯招生

我是 Chris，從 2017 年起在好想工作室擔任 Web Camp Mentor 至今，培訓許多屆的 Web Camp 學員，這次我們要招收 Web Ca...

Chris ‧ 2023-11-15

0 Like 0 留言 943 瀏覽

鐵人賽自我挑戰組 DAY 3

Do you wanna play? CSS game ぎりぎり系列第 3 篇

技術 [Day 3] Menu Icon: 漢堡包好好ㄘ

前言在每天的實作中，都會遇到不熟、不知道如何使用語法完成的難題，可以點擊CSS 100作者本身的CodePen參考(參考下圖紅色箭頭)，像是背景色、動畫效果之...

steventhibe ‧ 2022-09-10

2 Like 0 留言 942 瀏覽

技術 [快速入門前端 17] CSS 選擇器 (7) 選擇器總結

基本選擇器選擇器說明語法通配符作用範圍為所有標籤，用於頁面整體樣式 * { color: red } 元素作用於同種標籤，不能進行...

Doris ‧ 2023-05-22

0 Like 0 留言 942 瀏覽

鐵人賽自我挑戰組 DAY 18

在30天利用HTML & CSS & JavaScript完成Side Project實作系列第 18 篇

技術 Day 18 Side Project : Drag N Drop 拖與拉

今天要來做的是滑鼠拖拉事件，點選笑臉圖片可以把它拖放到空的正方形中，功能拆解預設情況圖片會放在第一個正方形內持續按著滑鼠左鍵，可以拖拉照片抓起圖片經...

hannnahTW ‧ 2022-09-24

0 Like 0 留言 939 瀏覽

鐵人賽 Software Development DAY 16

前端工程師不能不知道的生產力工具系列第 16 篇

技術 [Day16] Google Webfonts Helper

應用連結 source code 今天介紹的是 YURI 個人常用的字型工具 - Google Webfonts Helper。當專案需要設定外部...

Yuri Tsai ‧ 2020-10-01

1 Like 1 留言 936 瀏覽

鐵人賽自我挑戰組 DAY 14

每天來點 CSS Specification 系列第 14 篇

技術 Visual Formatting Model - inline

倘若不斷向深處扎根，就能茁壯成長 - RM 前言昨天我們聊到了 block-level，接續昨天的介紹，今天我們要來看的是 inline-level b...

RURU Tseng ‧ 2019-09-29 ‧團隊好想工作室 v3.0

4 Like 0 留言 935 瀏覽

鐵人賽 Modern Web DAY 12

防禦性 CSS - 建立「防患未然」的匠人心態系列第 12 篇

技術【Day12】圖片 - 圖片上的文字

情境圖片和文字通常是相輔相成的存在。現代的網頁上面有許多的圖片，一方面是為了讓畫面看起來更多元、豐富，另一方面，圖片也能夠幫助瀏覽者一眼看出作者想要表達的內容...

Taiming ‧ 2022-09-26 ‧團隊光明頂

3 Like 0 留言 934 瀏覽

技術 [快速入門前端 27] Overflow 和 Visibility

Overflow 溢出 CSS 的 overflow 屬性通常用於指定元素內容超過該元素範圍大小時的呈現方式，例如文字內容超過其父元素的寬度、圖片超過預設區域的...

Doris ‧ 2023-06-08

0 Like 0 留言 934 瀏覽

技術日記19

[https://codepen.io/terry-yu-the-vuer/pen/rNOrWYY?cf_chl_jschl_tk=cc73fd5172bc83...

九四帥 ‧ 2020-11-30

0 Like 0 留言 934 瀏覽

技術 CSS 使用 float:left & float:right 畫面會閃爍

參考css清除浮動各種方法設定完 float 後 .box { float: left; width: 200px; height: 100px...

Luis-Chen ‧ 2018-01-02