Hina Chen - HINA::工程幼稚園 (Page 16)

[12th 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

Sep 21, 2020 7 min read CSS Flexbox Media Query ITHome 鐵人賽 2020

簡單介紹雖然說 Flexbox [https://caniuse.com/?search=flex] 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程 [https://www.youtube.com/watch?v=_nCBQ6AIzDU&ab_channel=CSScoke] ，一定比看我在這邊講幹話來得實際！首先，我們先理解一下 flex 的作法， .flexbox { display:

[12th 鐵人賽] 從響應式的那個東西說起 Day 6

Sep 20, 2020 6 min read RWD AWD Media Query ITHome 鐵人賽 2020

很久很久以前想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候，你會發現有兩種模式， <table> <tr> <td><img src="/static/hero_01.jpg"></td> <td><img src=

[12th 鐵人賽] 從內容開始看格線系統 Day 5

Sep 19, 2020 10 min read CSS Media Query ITHome 鐵人賽 2020 Grid Layout Grid System

內容為王 > 如果以現在的趨勢來看，應該叫「廣告為王」。當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些事情，在整個版面上才會這麼重要。至於你說那些內容農場，基本上都屬於廣告為王的範疇，我就不討論了。如果對於文件設計很有經驗的人，基本上可以跳過這一天沒有關係。那麼，由於設計我不會，那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業，我們還是會回到前幾天所說的，與 viewport, @media 跟基本格線系統有關。 * viewport 能不能改？ * @media 怎麼設計？ * 那個 rem

[12th 鐵人賽] 給我一個 Box Day 4

Sep 18, 2020 6 min read ITHome 鐵人賽 Media Query Grid Layout Grid System

區塊我們在開天闢地的時候，網頁就是從區塊開始。 <header>  </header> <main>  </main> <footer>

[12th 鐵人賽] 我是誰，我在哪裡 Day 3

Sep 17, 2020 10 min read 2020 ITHome Grid Layout Grid System 鐵人賽

回到未來網頁在很久很久以前，是使用 HTML 來製作的，約莫過了 20 幾個年頭 [https://en.wikipedia.org/wiki/HTML] ，現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢，目前來到 HTML5 [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5]