iT邦幫忙

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

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

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

鐵人賽 影片教學 DAY 1

達標好文 技術 金魚都能懂的這個網頁畫面怎麼切 : 圖文滿版區塊

本篇重點問題回顧: 列出重點希望各位可以好好的將影片回放複習喔,另外幾個重點問題中,Amos已經有影片的會直接附上連結給各位參考取用。 為何需要reset...

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 24

技術 使用 table 來做垂直置中區塊

簡言 這個方式...沒甚麼好講的,就是一個很單純的用表格來做垂直置中,應該算是初初初初初級垂直置中技巧啦。 原理說明 去看這篇 使用 Display: tabl...

鐵人賽 影片教學 DAY 3

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

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

鐵人賽 影片教學 DAY 1

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

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

鐵人賽 影片教學 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 2

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

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

鐵人賽 Modern Web DAY 28

技術 左圖右文版面,文字垂直置中的方式?

支援度最高的垂直置中方式 左圖右文版面的垂直置中應該是最常見到的一種需求了,這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片,這種畫面基本上通常在樣版網站可...

鐵人賽 影片教學 DAY 6

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 19

技術 使用 Display: table-cell 做網頁垂直置中

簡言 這一招我想有點年紀的開者應該都有看過了,當然像我這麼嫩的開發者當然是第一次看到啦(這是什麼幹話),這一招的原理在於使用 CSS display 屬性將di...

鐵人賽 影片教學 DAY 7

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

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

鐵人賽 影片教學 DAY 30

技術 金魚都能懂網頁設計入門 : 接下來呢?(鐵人賽第三十天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 金魚的意義由你訂 對各位有無幫助 回文告訴 Amos 你對金魚的想...

鐵人賽 影片教學 DAY 8

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

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

鐵人賽 影片教學 DAY 10

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 影片教學 DAY 9

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

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

鐵人賽 影片教學 DAY 12

技術 金魚都能懂網頁設計入門 : CSS Reset (鐵人賽第十二天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 CSS Reset 的作用是甚麼? 為何需要使用 CSS Rese...

鐵人賽 影片教學 DAY 14

技術 金魚都能懂網頁設計入門 : Fixed定位 (鐵人賽第十四天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 關於Fixed 設定Fixed之後會有的特性有哪些 如何水平垂直置...

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 13

技術 使用 Grid + align-items 製作垂直置中區塊

簡言 align-items 不僅是 Flex 可用,連 CSS grid 也擁有此屬性可使用,但在 Flex 中 align-items 是針對次軸(cros...

鐵人賽 Modern Web DAY 29

技術 蓋版廣告的垂直置中技巧跟支援

數位生態 蓋板廣告太常見到了,目前幾乎人手多機的情況下,我們每天幾乎都離不開上網這行為,上網除了上班用電腦以外,幾乎都是用行動裝置上網了,也就經常會看到蓋版廣告...

鐵人賽 影片教學 DAY 26

技術 金魚都能懂網頁設計入門 : JQuery入門(鐵人賽第二十六天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 什麼是DOM JQuery的好處 使用JQ的起手式 追蹤 Amo...

鐵人賽 影片教學 DAY 11

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

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

鐵人賽 影片教學 DAY 20

技術 金魚都能懂網頁設計入門 : 媒體查詢 (鐵人賽第二十天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 撰寫方式 條件設定方式 有甚麼作用 追蹤 Amos 收好康資訊...

鐵人賽 Modern Web DAY 22

技術 使用 Padding 來做垂直置中啦

簡言 「什麼!這也算垂直置中技巧?連我阿嬤都知道這方式吧?!!」 對的!這的確也算是一種垂直置中的方式,不可諱言的這方式真的是簡單過頭了,以至於有些開發者認為這...

鐵人賽 影片教學 DAY 17

技術 金魚都能懂網頁設計入門 : 排個稀飯版 (鐵人賽第十七天)

教學影片 不要錯過 CSS coke 的影片 快按此訂閱CSS coke的頻道 重點回顧 flex特性 垂直置中的寫法 圖片下方的微幅距離怎麼處理掉 追蹤...