iT邦幫忙

amos相關文章
共有 53 則文章
鐵人賽 Modern Web DAY 10
完美 Camp 進化論 系列 第 10

技術 Web Camp 的初體驗

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 影片教學 DAY 30

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

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

鐵人賽 自我挑戰組 DAY 23
網頁學習紀錄 系列 第 23

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

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

鐵人賽 自我挑戰組 DAY 22
網頁學習紀錄 系列 第 22

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

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

鐵人賽 影片教學 DAY 1

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

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

鐵人賽 影片教學 DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 影片教學 DAY 27

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 影片教學 DAY 26

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 影片教學 DAY 20

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 影片教學 DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 影片教學 DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 影片教學 DAY 15

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

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

鐵人賽 影片教學 DAY 14

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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