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

3 Like 0 留言 3673 瀏覽

鐵人賽影片教學 DAY 17

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 17 篇

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

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

CSScoke ‧ 2018-11-01 ‧團隊阿莫斯の推坑教

1 Like 0 留言 3630 瀏覽

鐵人賽 Modern Web DAY 23

連續30天的超實務網頁設計的垂直置中教學系列第 23 篇

技術使用 Writing-mode 來做垂直置中區塊

簡言這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上...

CSScoke ‧ 2018-11-07

3 Like 0 留言 3610 瀏覽

鐵人賽 Modern Web DAY 27

連續30天的超實務網頁設計的垂直置中教學系列第 27 篇

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

RWD等比例目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區...

CSScoke ‧ 2018-11-11

5 Like 0 留言 3563 瀏覽

鐵人賽影片教學 DAY 11

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 11 篇

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

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

CSScoke ‧ 2018-10-26 ‧團隊阿莫斯の推坑教

2 Like 0 留言 3561 瀏覽

鐵人賽影片教學 DAY 26

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 26 篇

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

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

CSScoke ‧ 2018-11-10 ‧團隊阿莫斯の推坑教

1 Like 1 留言 3514 瀏覽

鐵人賽 Modern Web DAY 22

連續30天的超實務網頁設計的垂直置中教學系列第 22 篇

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

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

CSScoke ‧ 2018-11-06

1 Like 1 留言 3172 瀏覽

鐵人賽 Modern Web DAY 11

連續30天的超實務網頁設計的垂直置中教學系列第 11 篇

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

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

CSScoke ‧ 2018-10-26

1 Like 0 留言 3121 瀏覽

鐵人賽 Modern Web DAY 18

連續30天的超實務網頁設計的垂直置中教學系列第 18 篇

技術使用 Grid + margin 來達到垂直置中目的

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

CSScoke ‧ 2018-11-02

3 Like 0 留言 2883 瀏覽

鐵人賽影片教學 DAY 16

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 16 篇

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧絕對定位的特性有哪些我們在哪些情境可以利用到絕對定位的特性範例實...

CSScoke ‧ 2018-10-31 ‧團隊阿莫斯の推坑教

1 Like 0 留言 2793 瀏覽

鐵人賽 Modern Web DAY 20

連續30天的超實務網頁設計的垂直置中教學系列第 20 篇

技術使用計算機 calc 來做到垂直置中效果

簡言 Calc 是計算機英文單字「calculator」的縮寫，這個由微軟提出的 CSS 方法，真的是網頁開發的一大福音啊！我們竟然可以在網頁中直接做計算！？這...

CSScoke ‧ 2018-11-04

1 Like 0 留言 2766 瀏覽

鐵人賽 Modern Web DAY 21

連續30天的超實務網頁設計的垂直置中教學系列第 21 篇

技術使用相對定位 Relative + translateY 來做垂直置中

簡言這個技巧利用了 Top: 50% 的招式，讓你的物件上方能產生固定％數的距離，接著讓要置中的物件本身使用 tranlateY 的％數來達成垂直置中的需求，...

CSScoke ‧ 2018-11-05

3 Like 0 留言 2687 瀏覽

鐵人賽 Modern Web DAY 8

連續30天的超實務網頁設計的垂直置中教學系列第 8 篇

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

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

CSScoke ‧ 2018-10-23

3 Like 0 留言 2437 瀏覽

鐵人賽影片教學 DAY 15

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 15 篇

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

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

CSScoke ‧ 2018-10-30 ‧團隊阿莫斯の推坑教

2 Like 0 留言 2302 瀏覽

鐵人賽 Modern Web DAY 17

連續30天的超實務網頁設計的垂直置中教學系列第 17 篇

技術使用 Grid + place-content 製作垂直置中區塊

簡言 place-content 這個 CSS Grid 的屬性不知道有多少人用過，此屬性是 align-content 與 justify-content 的...

CSScoke ‧ 2018-11-01

2 Like 0 留言 2298 瀏覽

鐵人賽 Modern Web DAY 26

連續30天的超實務網頁設計的垂直置中教學系列第 26 篇

技術 IE8以上的網頁我該如何做垂直置中?

講了這麼多垂直置中... 從一開始鐵人賽開賽以來，Amos寫了 25種這麼多的垂直置中技巧，但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機，今天我們就來看...

CSScoke ‧ 2018-11-10

3 Like 0 留言 2212 瀏覽

鐵人賽影片教學 DAY 27

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 27 篇

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

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧事件是甚麼為何我們需要知道事件 JQuery中有多少種事件選取物件...

CSScoke ‧ 2018-11-11 ‧團隊阿莫斯の推坑教

2 Like 0 留言 2072 瀏覽

鐵人賽 Modern Web DAY 14

連續30天的超實務網頁設計的垂直置中教學系列第 14 篇

技術使用 Grid + align-content 做垂直置中

簡言 CSS grid 的 align-content 跟 Flex 的 align-content 有點差異，CSS grid 對於空間的解釋會跟 Flex...

CSScoke ‧ 2018-10-29

1 Like 0 留言 1781 瀏覽

鐵人賽 Modern Web DAY 12

連續30天的超實務網頁設計的垂直置中教學系列第 12 篇

技術使用 Grid + template 做垂直置中

簡言 CSS grid 最令人驚豔的就是這個 template 的功能了，簡直就是把區塊當畫布在使用一般，我們僅需要把樣板設定成三列，就能搞定垂直置中啦。原理...

CSScoke ‧ 2018-10-27

1 Like 0 留言 1687 瀏覽

鐵人賽 Modern Web DAY 15

連續30天的超實務網頁設計的垂直置中教學系列第 15 篇

技術使用 Grid + align-self 達到垂直置中效果

簡言 align-self 應該大家都不陌生，基本上就是對 grid Y軸的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成...

CSScoke ‧ 2018-10-30

2 Like 0 留言 1676 瀏覽

鐵人賽影片教學 DAY 30

金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎系列第 30 篇

技術金魚都能懂的這個網頁畫面怎麼切 : 今天你金魚了嗎?

大家好～我是 Amos，這次要跟大家分享的是切版的教學，如果您本身對於 HTML & CSS 的基礎還不了解的話，建議您可以先看去年鐵人的基礎教學金魚...

CSScoke ‧ 2019-10-15 ‧團隊Amos的推坑教2.0

1 Like 0 留言 1368 瀏覽

鐵人賽 Modern Web DAY 10

完美 Camp 進化論系列第 10 篇

技術 Web Camp 的初體驗

在好想學習前，我有幾次和 web 相關的經驗高中電腦課做過 HTML 的網站。高中架設一個日本女子美聲團體(kiroro)的網站，當時可是亞洲最大全日...

Chris ‧ 2020-09-25 ‧團隊好想工作室 v4.0

0 Like 2 留言 1235 瀏覽

鐵人賽自我挑戰組 DAY 22

網頁學習紀錄系列第 22 篇

技術鐵人賽 Day22 人員卡片介紹頁面-Amos 老師的教學筆記

鐵人賽寫到今天，發現到網頁的知識什麼我很熟？什麼我很常用？什麼東西寫過就忘了？網頁程式資料真的很多，打開 W3School 已經超多可以看，還有 jQue...

Tim Hsu ‧ 2019-09-25

2 Like 0 留言 991 瀏覽

鐵人賽自我挑戰組 DAY 23

網頁學習紀錄系列第 23 篇

技術鐵人賽 Day23 人員卡片介紹-基本架構

每次看 Amos 老師寫程式根本就是飛快，非常羨慕有這樣的能力，也不斷透過影片跟著老師的思維再走，看他怎麼編寫網頁的，首先先把 HTML 的架構編寫好，確認架構...

Tim Hsu ‧ 2019-09-26

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

技術 使用 Writing-mode 來做垂直置中區塊

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

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

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

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

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

技術 使用 Grid + margin 來達到垂直置中目的

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

技術 使用計算機 calc 來做到垂直置中效果

技術 使用相對定位 Relative + translateY 來做垂直置中

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

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

技術 使用 Grid + place-content 製作垂直置中區塊