CSS Flexbox 網頁切版技巧

這次要完成的切版如上圖，當中藏著幾個小技巧： CSS reset inline & block flex-direction 的原理 漸層色彩與多重背景撰寫方式 (合體技) 100vh 螢幕高度! HTML 架構 先確認架構正確了，再來寫 CSS 會更快速。

在切版領域中一個很重要的概念，就是格線系統 (Grid System)，我會在這個階段去熟悉他，並學習如何用CSS Grid屬性來切版。

因為每個瀏覽器所預設的的css預設值都不太一樣，所以我們常常會為了要讓每個平台一樣，要根據瀏覽器去做各種不同樣式的調整，也就是所謂的 破版 (在chrome看正常，去了ie就壞掉了)

這篇文章將從實務角度解釋什麼是切版、它在開發流程中扮演的角色，以及前端設計師與前端工程師之間的分工合作關係，幫助你全面掌握這個前端開發的基礎工作。

切版是前端工程師必須要具備的技能，但到底什麼是切版？ 白話來說，切版就是要把設計師針對使用者需求所完成的設計稿，透過程式讓它在網頁中實際呈現出來。

Q：如果我已經有你們的 影音課程（ex: 使用 HTML、CSS 開發一個網站），還需要參加網頁切版直播班嗎？ A：影音課程的設計上，理論和實作都是 5:5，而網頁切版直播班則是實作機會比較多，互動性也高。

本篇文章的切版練習，是跟著這部 切版教學影片 一起切出來的，如果有興趣的話，可以去看看原本教學者的系列影片，蠻有趣的。