一次解決常見 CSS 排版問題：float、position、flexbox、gridsystem

手把手網頁實作，6 種頁面一次教你

# 包含首頁、關於我們、動物認養、動物新聞、合作夥伴、關於我們，6 種頁面實作

你總是無法設計出好看的頁面嗎？

# 教你調整出好看又容易閱讀的網站排版

切出來的版面總是跟設計稿不一樣，到底是哪裡出問題？

❓ 問題 1：想要實作響應式網頁（RWD），但不知道怎麼做？
💡 解決方案：課程第 4 ~ 6 章，將教授 flexbox、grid system。

flexbox－是為了適應不同螢幕尺寸和顯示設備而生的佈局模式，比起 block、table、position、inline、float 等，flexbox 更能輕鬆且有彈性的處理網頁和 App 的排版，以及 RWD 的問題。

grid system－提供富有彈性且方便的網頁排版及模組化方法。它藉由「格子切割版面」來設計佈局，例如：把一定寬度的頁面切割成數欄，並且欄與欄之間留有間隙，按照這樣的方式去排版。

❓ 問題 2：不知道怎麼做出下拉式選單？
💡 解決方案：課程第 3 章，將教授 position。

想要做出選單固定在頁面最上或是最下方，一定要用position的屬性。本課程將會把 position 的各屬性彼此的關係，以及實例應用做一個完整的說明，讓你在操作隱藏選單或是互動區塊沒有任何障礙！

❓ 問題 3：版面上的圖片、文字位置老是不對！
💡 解決方案：課程第 1~2 章，將教授 float。

float 浮動功能是用來設定網頁中各獨立元素與其他元素的關係。float 可以讓圖片、區塊、影片、欄位、表單、表格等元素，進行浮動排列，透過 DIV 將各元素區塊劃分出來，再結合 float 進行排版，是一種常見的網頁排版計巧，新一代的多欄式網頁規劃，也採用 float 的技巧，而非傳統的 table 表格計巧，且幾乎所有的主流瀏覽器都支援 float。

這樣的你，一定會需要這堂課

1. 網頁設計師

Before：總規劃不出理想的版面，跟前端工程師溝通總是雞同鴨講...

After：規劃網頁版面，了解自己設計的版面是否是技術上可以達成的，並且有效與前端工程師溝通。

2. 後端工程師

Before：會了基本的文字與圖片的 CSS 應用，但是更進一步的版面 CSS 應用卻是一籌莫展....

After：了解 CSS 版面屬性的應用要點後，可以獨立自己跨前端的接手各種網頁版面難題，再也不卡關。

3. 前端工程師

Before：排版技巧不佳，總切不出跟設計稿一樣的版面，位置總是亂跑...

After：突破排版盲點，避開許多排版常見錯誤，運用正確的語法設計版面！

上過課程的同學都給予滿滿 5 星好評！

⭐️林Ｘ芮：老師講解的很詳細，淺顯易懂。學習過程中很順利且實用

⭐️郭Ｘ婷：用最容易理解的方式講解，很適合初學

⭐️賴Ｘ燁：講解得非常詳細~淺顯易懂希望趕快有有更新的內容

課前你可能會有這些疑問

Q：沒有任何 HTML、CSS、JavaScript 的基礎，適合上這堂課程嗎？

A：建議要有 HTML、CSS 基礎的人再加入課程會比較好喔！因為這堂課會著重在講解 CSS 常見的排版問題。