HTML & CSS 切版實作練習｜微軟首頁仿切專案

此作品為我在前端學習過程中，針對 大型網站首頁切版 的實作練習，參考對象為 Microsoft 官方網站。 目標在於練習 HTML 與 CSS 的整合應用，並嘗試實作響應式設計（RWD）以符合不同裝置的顯示需求。

不使用bootstrap框架，練習各種網頁上可能常見的各種版型／元件／區塊等，並使用CodePen提供範例參考.

切版練習室的訓練方法參考了設計理論中的 原子設計，也就是靈感於化學元素週期表與物質組成的法則，從最小的單位原子（元素）開始，再進一步結合成為分子、組織、頁面。

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

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

這門課程，我們是以 「 業界常見版型主題 」 為導向，來規劃我們的課綱，讓您上完課後，就能夠開始動手練版型。 在排版時，常常為了幾 px 的位移或跑版而傷透腦筋嗎？ 其實只要掌握幾個關鍵知識，你也能切出精準到位的版型！ 李小龍說過：「我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人」，網頁排版擁有 float、inline-block、flexbox、grid 流派，但是你真的有認真將一個流派專精到讓人會怕嗎？ 本堂題目我們將會詳細講解 Flexbox，並藉由後面幾堂的反覆練習，讓您成為 F