iT邦幫忙

amos相關文章
共有 51 則文章
鐵人賽 Modern Web DAY 11

技術 使用 Flex + align-content 來製作垂直置中

簡言 在正常的狀況下,align-conent 僅能對次軸多行 flex item 做置中,但是當我今天子層物件不確定有多少個時,且有時可能會有單個的情況出現的...

鐵人賽 影片教學 DAY 11

技術 金魚都能懂網頁設計入門 : 換個新盒子 (鐵人賽第十一天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 盒模型有哪兩種模式 盒模型的兩種計算方式 盒模型的設定方式 追蹤...

鐵人賽 Modern Web DAY 10

技術 使用 Flex + align-self 做垂直置中

簡言 align-self 應該大家都不陌生,基本上就是對 flex 次軸(cross axis)的個別對齊方式,只要對單一子層物件設定 align-self:...

鐵人賽 影片教學 DAY 10

技術 金魚都能懂網頁設計入門 : 網頁兩大主角 (鐵人賽第十天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 兩大主角特性 inline 靠內容撐開,無法設定寬高 block...

鐵人賽 Modern Web DAY 9

技術 使用 Flex + margin 輕鬆垂直置中

簡言 繼續用 Flex 來置中,由於 Flex 物件對空間解讀的特殊性,我們只要在父層物件設定 display: flex,接著在需要垂直置中的物件上設定 ma...

鐵人賽 影片教學 DAY 9

技術 金魚都能懂網頁設計入門 : Float浮動 (鐵人賽第九天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 浮動 float 的特性 有靠左跟靠右就是沒有置中 子層浮動時,父...

鐵人賽 Modern Web DAY 8

技術 使用 Flex + :before + flex-grow 做垂直置中

簡言 Flex 有多種方式可以讓你把資料置中,使用 Flex-grow 的延展特性來達成,這個例子中 Amos 使用了 flex-direction: colu...

鐵人賽 影片教學 DAY 8

技術 金魚都能懂網頁設計入門 : 區塊尺寸計算 (鐵人賽第八天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 區塊的尺寸計算 一個區塊的尺寸是如何被計算出來的? 這關係到你的版面...

鐵人賽 影片教學 DAY 7

技術 金魚都能懂網頁設計入門 : 怎麼學CSS ? (鐵人賽第七天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 心智圖的使用 先建立子主題再使用滑鼠拖拉來做分類 使用 Enter...

鐵人賽 Modern Web DAY 7

技術 使用 Flex + align-items 做垂直置中

簡言 Flex ! 前端的毒品!後端的寶物!這東西自從面世之後就不斷的考驗網頁教學者的良心,到底要不要拋棄 float 擁抱 flex,我想這答案人人心中自有一...

鐵人賽 影片教學 DAY 6

技術 金魚都能懂 網頁設計入門 : CSS撰寫位置 (鐵人賽第六天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 CSS能寫在哪裡? HTML原始碼的style屬性內 style標...

鐵人賽 Modern Web DAY 6

技術 使用 absolute + translate 達到CSS垂直置中的效果

簡言 此方式應該算是最方便的了,因為此置中的定位物件不需要固定的寬跟高,我們利用絕對定位時的 left 跟 top 設定物件的上方跟左方各都為 50% ,再利用...

鐵人賽 影片教學 DAY 5

技術 金魚都能懂網頁設計入門 : 網頁裝潢師CSS - 鐵人賽第五天

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 CSS是甚麼? Cascading Style Sheets,簡寫C...

鐵人賽 Modern Web DAY 5

技術 使用 absolute + margin auto 來達到CSS垂直置中效果

簡言 絕對定位的垂直置中又一個,這個方式比較特別一點,當物件設定絕對定位之後,預設它是抓不到整體可運用空間的範圍,所以 margin: auto 此時會失效,但...

鐵人賽 影片教學 DAY 4

技術 金魚都能懂 網頁設計入門 : 再談HTML -鐵人賽第四天

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 標籤屬性是甚麼 HTML標籤因為用途的關係,每個標籤本都可能帶有不同...

鐵人賽 Modern Web DAY 4

技術 使用 absolute + margin負值來達到垂直置中的目的

簡言 誰說絕對定位(position: absolute)要少用的?Amos 認為沒有少用多用的問題,重點在於你是否有「妥善運用」才是重點,絕對定位在這個例子中...

鐵人賽 影片教學 DAY 3

技術 金魚都能懂 網頁設計入門 : 用甚麼工具寫網頁? - 鐵人賽第三天

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 目前撰寫網頁常見的工具有哪幾個 Brackets 免費軟體,跟Ado...

鐵人賽 Modern Web DAY 3

技術 使用CSS ::before + inline-block 屬性來達到垂直置中

簡言 這是一個歷史最悠久的垂直置中方式了,支援度達到IE6+,這個方式基本上非常的符合垂直對齊的字面上意思,他是真的讓兩個物件之間做到垂直對齊。我們使用 :be...

鐵人賽 Modern Web DAY 2

技術 使用CSS line-height + inline-block 做多行文字的垂直置中

簡言 既然可以使用第一種方式對「行物件(inline) 」達成垂直置中的話,當然沒有理由不能做到多行啊!但是你需要將多個物件或多行物件當成一個「行」物件來看待,...

鐵人賽 Modern Web DAY 1

技術 使用CSS Line-height 做垂直置中

簡言 這個方式應該是最多人知道的了,其實這符合資料垂直置中而非垂直對齊,常見於單行文字的應用,像是按鈕這一類物件,或者是選單、導覽列此類物件最常見到此方式了。此...

鐵人賽 影片教學 DAY 1

達標好文 技術 鐵人賽第一天開播,節目預告

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 追蹤 Amos 收好康資訊 Line搜尋「@csscoke」加入CSS可樂公開...