iT邦幫忙

web相關文章
共有 262 則文章

技術 [筆記] React 如何使用 Redux-Observable:Week02 副線打怪一下(2)

為何要使用Redux-Observable? 首先,一開始我們都知道redux跟react搭配的很好,redux扮演著資料倉儲的角色,但是許多的side eff...

技術 [筆記] React 如何使用 Redux-Observable:Week02 副線打怪一下(1)

題外話一下XD 最近的武漢肺炎實在是太猖狂了 在今天早上得知中國竟然連北京都淪陷了,進而封城了,這武漢肺炎真的是很母湯!!(中國北京封城) 因為武漢肺炎的關係,...

技術 領進前端門,修行在個人Week 01:關於本系列文章

前言 這是我第一次參加寫文大賽,以往都只有在iT邦看各位大神的教學文,這次在過年間意外發現六角學院 - 鼠年全馬鐵人挑戰賽這項活動,其實也猶豫了很久才決定參加這...

鐵人賽 自我挑戰組 DAY 29
前端新手進化史 系列 第 29

技術 flex 7

文章將陸續整理並更新至個人部落格。 flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動...

鐵人賽 自我挑戰組 DAY 28
前端新手進化史 系列 第 28

技術 flex 6

文章將陸續整理並更新至個人部落格。 vertical-align、text-align 甚至 float 都是叫不動 flex items 的,fle...

鐵人賽 自我挑戰組 DAY 27
前端新手進化史 系列 第 27

技術 flex 5

文章將陸續整理並更新至個人部落格。 上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性...

鐵人賽 自我挑戰組 DAY 26
前端新手進化史 系列 第 26

技術 flex 4

文章將陸續整理並更新至個人部落格。 今天將介紹 flex 屬性,在這之前先來了解一下 positive free space 與 negative f...

鐵人賽 自我挑戰組 DAY 25
前端新手進化史 系列 第 25

技術 flex 3

文章將陸續整理並更新至個人部落格。 在上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的...

鐵人賽 自我挑戰組 DAY 24
前端新手進化史 系列 第 24

技術 flex 2

文章將陸續整理並更新至個人部落格。 先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立...

鐵人賽 自我挑戰組 DAY 23
前端新手進化史 系列 第 23

技術 flex 1

文章將陸續整理並更新至個人部落格。 前言 先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內...

鐵人賽 自我挑戰組 DAY 22
前端新手進化史 系列 第 22

技術 替換元素 replaced element

文章將陸續整理並更新至個人部落格。 前言 替換元素雖然預設為 display: inline,但又與一般常見的 inline element 不同,準...

鐵人賽 自我挑戰組 DAY 21
前端新手進化史 系列 第 21

技術 旋轉吧 rotate3d

文章將陸續整理並更新至個人部落格。 今天不看 spec 哈哈,來現學現賣熱騰騰剛學到的新招式~ 以前很俗的只知道一般的 rotate,完全不知道還有這...

鐵人賽 自我挑戰組 DAY 20
前端新手進化史 系列 第 20

技術 淺談 line box 高度

文章將陸續整理並更新至個人部落格。 前言 所有 inline-level elements 所生成的 inline-level boxes 皆會參與行...

鐵人賽 自我挑戰組 DAY 19
前端新手進化史 系列 第 19

技術 視覺格式化模型 - 行內格式化上下文(IFC)

文章將陸續整理並更新至個人部落格。 前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個...

鐵人賽 自我挑戰組 DAY 18
前端新手進化史 系列 第 18

技術 視覺格式化模型-塊格式化上下文(BFC)

文章將陸續整理並更新至個人部落格。 在先前的文章中提到不少次「BFC」,今天就來看看 BFC 是什麼,它又有什麼用處~ 塊格式化上下文 (BFC)...

鐵人賽 自我挑戰組 DAY 17
前端新手進化史 系列 第 17

技術 視覺格式化模型-格式化上下文

文章將陸續整理並更新至個人部落格。 前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個...

鐵人賽 自我挑戰組 DAY 16
前端新手進化史 系列 第 16

技術 position

文章將陸續整理並更新至個人部落格。 position 語法 position: static | relative | absolute | fixe...

鐵人賽 自我挑戰組 DAY 15
前端新手進化史 系列 第 15

技術 視覺格式化模型-Box generation(下)

文章將陸續整理並更新至個人部落格。 匿名塊盒子 (Anonymous block boxes) 由於 塊容器盒(block container bo...

鐵人賽 自我挑戰組 DAY 14
前端新手進化史 系列 第 14

技術 視覺格式化模型-Box generation(中)

文章將陸續整理並更新至個人部落格。 前言 視覺格式化模型會依據盒子模型(box model)將元素轉換為一個個盒子(box),並且根據盒子的包含塊(...

鐵人賽 自我挑戰組 DAY 13
前端新手進化史 系列 第 13

技術 視覺格式化模型-Box generation(上)

文章將陸續整理並更新至個人部落格。 前言 視覺格式化模型會依據盒子模型(box model)將元素轉換為一個個盒子(box),並且根據盒子的包含塊(c...

鐵人賽 自我挑戰組 DAY 12
前端新手進化史 系列 第 12

技術 Containing block

文章將陸續整理並更新至個人部落格。 每個元素會生成零(display: none 時)至多個盒子(例如 display 為 list-item 時),...

鐵人賽 自我挑戰組 DAY 11
前端新手進化史 系列 第 11

技術 番外篇 - 胡搞 box-shadow (下)

文章將陸續整理並更新至個人部落格。 誰說影子一定要是黑色的呢? 誰說影子永遠當不了主角呢? 放下先入為主的偏見~ 來看看幾個 box-shadow 幹...

鐵人賽 自我挑戰組 DAY 10
前端新手進化史 系列 第 10

技術 番外篇 - 胡搞 box-shadow (中)

文章將陸續整理並更新至個人部落格。 咦,box-shadow 和 box model 唸起來很像? 他們的確有關聯沒錯! 還記得 box model...

鐵人賽 自我挑戰組 DAY 9
前端新手進化史 系列 第 9

技術 番外篇 - 胡搞 box-shadow(上)

文章將陸續整理並更新至個人部落格。 box-shadow 通常像是個可有可無的角色,但其實他也可以變出好玩的花樣,在展現影分身之術前,還是先來打個基本...

鐵人賽 自我挑戰組 DAY 8
前端新手進化史 系列 第 8

技術 text-align

文章將陸續整理並更新至個人部落格。 text-align 到底能控制哪些東西呢? 上一篇文章中提到 display 屬性分成內部顯示與外部顯示,設定...

鐵人賽 自我挑戰組 DAY 7
前端新手進化史 系列 第 7

技術 混血兒 inline-block

文章將陸續整理並更新至個人部落格。 inline-block 就像是 HTML 中 inline 和 block 兩大角頭聯姻下的產物,來看看他遺傳了...

鐵人賽 Modern Web DAY 5

技術 [DAY5]登入系統製作_Part2

今天我們來做個FailLogin.html的畫面, 當我們登入失敗時,我們應該要出現登入失敗的畫面, 並且在幾秒之後將網頁導回到登入的畫面! 這裡我們可以用HT...

鐵人賽 自我挑戰組 DAY 6
前端新手進化史 系列 第 6

技術 Collapsing margins

文章將陸續整理並更新至個人部落格。 一、什麼是 Collapsing margins? 先來看一段 W3C 規範 的敘述: In CSS, the...

鐵人賽 自我挑戰組 DAY 5
前端新手進化史 系列 第 5

技術 基礎 box model (下)

文章將陸續整理並更新至個人部落格。 在上一篇文章 基礎 box model (上) 中,認識了 box model 的長相,這篇將來看看 box mo...

鐵人賽 自我挑戰組 DAY 4
前端新手進化史 系列 第 4

技術 基礎 box model (上)

文章將陸續整理並更新至個人部落格。 想像每個元素都是一個盒子,<html> 像是個超級大盒子,裡面裝著各式各樣的盒子,盒子又可以裝盒子,一...