iT邦幫忙

amos相關文章
共有 53 則文章
9 Like 0 留言 37488 瀏覽
鐵人賽 Modern Web DAY 6
連續30天的超實務網頁設計的垂直置中教學 系列 第 6 篇

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

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

CSScoke ‧ 2018-10-21
6 Like 0 留言 34459 瀏覽
鐵人賽 Modern Web DAY 7
連續30天的超實務網頁設計的垂直置中教學 系列 第 7 篇

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

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

CSScoke ‧ 2018-10-22
1 Like 0 留言 27906 瀏覽
鐵人賽 Modern Web DAY 24
連續30天的超實務網頁設計的垂直置中教學 系列 第 24 篇

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

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

CSScoke ‧ 2018-11-08
21 Like 0 留言 14771 瀏覽
鐵人賽 Modern Web DAY 1
金魚都能懂的CSS必學屬性 系列 第 1 篇

達標好文 技術 金魚都能懂的CSS必學屬性-CSS真的這麼難學嗎

說到CSS的學習與教學，基本上最多人會卡到的問題就是CSS屬性這麼多，好難學懂或是學到完整，基本上這個問題對於多數的網頁新手來說，始終都是個難解的困擾，但實際上...

CSScoke ‧ 2020-09-16
24 Like 3 留言 14672 瀏覽
鐵人賽 影片教學 DAY 1
金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列 第 1 篇

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

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

CSScoke ‧ 2019-09-16 ‧團隊Amos的推坑教2.0
8 Like 2 留言 14356 瀏覽
鐵人賽 影片教學 DAY 3
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 3 篇

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

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

CSScoke ‧ 2018-10-18 ‧團隊阿莫斯の推坑教
2 Like 0 留言 11766 瀏覽
鐵人賽 Modern Web DAY 5
連續30天的超實務網頁設計的垂直置中教學 系列 第 5 篇

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

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

CSScoke ‧ 2018-10-20
2 Like 0 留言 11374 瀏覽
鐵人賽 Modern Web DAY 19
連續30天的超實務網頁設計的垂直置中教學 系列 第 19 篇

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

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

CSScoke ‧ 2018-11-03
6 Like 0 留言 9361 瀏覽
鐵人賽 影片教學 DAY 4
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 4 篇

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

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

CSScoke ‧ 2018-10-19 ‧團隊阿莫斯の推坑教
4 Like 0 留言 9166 瀏覽
鐵人賽 影片教學 DAY 6
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 6 篇

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

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

CSScoke ‧ 2018-10-21 ‧團隊阿莫斯の推坑教
2 Like 0 留言 9069 瀏覽
鐵人賽 Modern Web DAY 28
連續30天的超實務網頁設計的垂直置中教學 系列 第 28 篇

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

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

CSScoke ‧ 2018-11-12
5 Like 0 留言 8750 瀏覽
鐵人賽 影片教學 DAY 7
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 7 篇

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

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

CSScoke ‧ 2018-10-22 ‧團隊阿莫斯の推坑教
10 Like 0 留言 8652 瀏覽
鐵人賽 影片教學 DAY 1
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 1 篇

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

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

CSScoke ‧ 2018-10-16 ‧團隊阿莫斯の推坑教
8 Like 0 留言 7822 瀏覽
鐵人賽 Modern Web DAY 2
連續30天的超實務網頁設計的垂直置中教學 系列 第 2 篇

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

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

CSScoke ‧ 2018-10-17
5 Like 0 留言 7761 瀏覽
鐵人賽 影片教學 DAY 5
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 5 篇

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

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

CSScoke ‧ 2018-10-20 ‧團隊阿莫斯の推坑教
5 Like 0 留言 7699 瀏覽
鐵人賽 Modern Web DAY 3
連續30天的超實務網頁設計的垂直置中教學 系列 第 3 篇

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

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

CSScoke ‧ 2018-10-18
2 Like 0 留言 7440 瀏覽
鐵人賽 Modern Web DAY 13
連續30天的超實務網頁設計的垂直置中教學 系列 第 13 篇

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

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

CSScoke ‧ 2018-10-28
6 Like 0 留言 6635 瀏覽
鐵人賽 影片教學 DAY 8
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 8 篇

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

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

CSScoke ‧ 2018-10-23 ‧團隊阿莫斯の推坑教
11 Like 1 留言 6371 瀏覽
鐵人賽 Modern Web DAY 1
連續30天的超實務網頁設計的垂直置中教學 系列 第 1 篇

達標好文 技術 使用CSS Line-height 做垂直置中

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

CSScoke ‧ 2018-10-16
5 Like 1 留言 5913 瀏覽
鐵人賽 影片教學 DAY 10
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 10 篇

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

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

CSScoke ‧ 2018-10-25 ‧團隊阿莫斯の推坑教
5 Like 0 留言 5898 瀏覽
鐵人賽 影片教學 DAY 9
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 9 篇

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

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

CSScoke ‧ 2018-10-24 ‧團隊阿莫斯の推坑教
3 Like 0 留言 5550 瀏覽
鐵人賽 Modern Web DAY 29
連續30天的超實務網頁設計的垂直置中教學 系列 第 29 篇

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

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

CSScoke ‧ 2018-11-13
2 Like 0 留言 5405 瀏覽
鐵人賽 Modern Web DAY 9
連續30天的超實務網頁設計的垂直置中教學 系列 第 9 篇

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

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

CSScoke ‧ 2018-10-24
2 Like 0 留言 5003 瀏覽
鐵人賽 Modern Web DAY 16
連續30天的超實務網頁設計的垂直置中教學 系列 第 16 篇

技術 使用 Grid + place-items 來做垂直置中效果

簡言 place-items 這屬性不知道有多少人用過，我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊，達到垂直置中的效果。 原理說明 place-item...

CSScoke ‧ 2018-10-31
7 Like 3 留言 4749 瀏覽
鐵人賽 影片教學 DAY 30
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 30 篇

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

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

CSScoke ‧ 2018-11-14 ‧團隊阿莫斯の推坑教
5 Like 0 留言 4527 瀏覽
鐵人賽 影片教學 DAY 12
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 12 篇

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

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

CSScoke ‧ 2018-10-27 ‧團隊阿莫斯の推坑教
4 Like 1 留言 4520 瀏覽
鐵人賽 Modern Web DAY 4
連續30天的超實務網頁設計的垂直置中教學 系列 第 4 篇

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

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

CSScoke ‧ 2018-10-19
1 Like 0 留言 4152 瀏覽
鐵人賽 Modern Web DAY 10
連續30天的超實務網頁設計的垂直置中教學 系列 第 10 篇

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

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

CSScoke ‧ 2018-10-25
3 Like 0 留言 3967 瀏覽
鐵人賽 影片教學 DAY 17
金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列 第 17 篇

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

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

CSScoke ‧ 2018-11-01 ‧團隊阿莫斯の推坑教
1 Like 0 留言 3932 瀏覽
鐵人賽 Modern Web DAY 23
連續30天的超實務網頁設計的垂直置中教學 系列 第 23 篇

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

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

CSScoke ‧ 2018-11-07
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙