iT邦幫忙

web相關文章
共有 259 則文章
鐵人賽 自我挑戰組 DAY 29
前端新手進化史 系列 第 29

技術 flex 7

flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動 flex items 的。想要讓 flex...

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

技術 flex 6

vertical-align、text-align 甚至 float 都是叫不動 flex items 的,flex 有自己專屬的對齊屬性,而想要讓 flex...

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

技術 flex 5

上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性的三合一,而 flex 屬性值除了直接給定三...

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

技術 flex 4

今天將介紹 flex 屬性,在這之前先來了解一下 positive free space 與 negative free space 這兩個名詞。 pos...

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

技術 flex 3

在上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的概念,今天將介紹 flex-wrap、fle...

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

技術 flex 2

先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立格式化上下文,而 display: flex...

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

技術 flex 1

前言 先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立格式化上下文,例如 grid conta...

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

技術 替換元素 replaced element

前言 替換元素雖然預設為 display: inline,但又與一般常見的 inline element 不同,準確來說,它是 inline-level ele...

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

技術 旋轉吧 rotate3d

今天不看 spec 哈哈,來現學現賣熱騰騰剛學到的新招式~ 以前很俗的只知道一般的 rotate,完全不知道還有這玩意兒 簡單做幾個小 demo 測試測試~...

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

技術 淺談 line box 高度

前言 所有 inline-level elements 所生成的 inline-level boxes 皆會參與行內格式化上下文(IFC),在 IFC 佈局環境...

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

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

前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個版面都是盒子!這些盒子依照自己所屬的格式化上...

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

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

在先前的文章中提到不少次「BFC」,今天就來看看 BFC 是什麼,它又有什麼用處~ 塊格式化上下文 (BFC) 摘自 W3C In a block for...

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

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

前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個版面都是盒子!這些盒子依照自己所屬的格式化上下...

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

技術 position

position 語法 position: static | relative | absolute | fixed 接下來將逐一介紹屬性值的意義。 s...

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

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

匿名塊盒子 (Anonymous block boxes) 由於 塊容器盒(block container box) 「只能裝塊級盒子(block-leve...

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

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

前言 視覺格式化模型會依據盒子模型(box model)將元素轉換為一個個盒子(box),並且根據盒子的包含塊(containing block)邊界來渲染...

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

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

前言 視覺格式化模型會依據盒子模型(box model)將元素轉換為一個個盒子(box),並且根據盒子的包含塊(containing block)邊界來渲染盒...

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

技術 Containing block

每個元素會生成零(display: none 時)至多個盒子(例如 display 為 list-item 時),盒子(box)可以裝盒子,不同的盒子會依據它...

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

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

誰說影子一定要是黑色的呢? 誰說影子永遠當不了主角呢? 放下先入為主的偏見~ 來看看幾個 box-shadow 幹的好事吧~ (以下純屬好玩~不要太認真~~)...

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

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

咦,box-shadow 和 box model 唸起來很像? 他們的確有關聯沒錯! 還記得 box model 是由四個部分:內容區(content)、內距...

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

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

box-shadow 通常像是個可有可無的角色,但其實他也可以變出好玩的花樣,在展現影分身之術前,還是先來打個基本功,熟悉一下 box-shadow 的特性吧...

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

技術 text-align

text-align 到底能控制哪些東西呢? 上一篇文章中提到 display 屬性分成內部顯示與外部顯示,設定 display: inline-block,...

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

技術 混血兒 inline-block

inline-block 就像是 HTML 中 inline 和 block 兩大角頭聯姻下的產物,來看看他遺傳了哪些優良的顯性基因吧! 首先,該如何召...

鐵人賽 Modern Web DAY 5

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

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

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

技術 Collapsing margins

奇怪,明明給定了 margin ,場面卻一直失控? 來了解一下 Collapsing margins 吧! 一、什麼是 Collapsing margins...

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

技術 基礎 box model (下)

在上一篇文章 基礎 box model (上) 中,認識了 box model 的長相,這篇將來看看 box model 的身材。 在進入正題前,先快速複...

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

技術 基礎 box model (上)

想像每個元素都是一個盒子,<html> 像是個超級大盒子,裡面裝著各式各樣的盒子,盒子又可以裝盒子,一個版面正是由許許多多的盒子所構成。box m...

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

技術 大 角頭 block

在上一篇 大角頭1號 - inline元素 中,已經向 inline 元素拜過碼頭,接下來就是 block 元素了!二大角頭各有自己的脾氣特性! 前情提要...

鐵人賽 Modern Web DAY 1

技術 [Day1] 分享WEB學習經歷以及全端網頁工程師環境安裝

這30天要幹嘛!? HI~我是Roni 這30天我會分享這兩年來學習全端的心路歷程,我會以類似日記及懶人重點筆記做整理分享給大家。 盡量每天文章最後都會附贈**...

徵才 [捷惠自動機械]誠徵 ASP.NET系統設計師

自動化設備商徵才 - 捷惠自動機械 有任何問題歡迎來信至 mis2@jhmco.com.tw / 劉小姐 這個職務需要對資訊技術有熱忱的您, 目前工作內容是維護...