頁面佈局

作為前端，靜態頁面很考驗一個css的功底，看一些大牛視訊書寫基礎靜態頁面的時候，非常舒服，因為整個頁面佈局的結構非常好，不僅語義化，每一個塊之間也分的很清楚。今天就講講頁面佈局怎麼去劃分結構。

以天貓為例，我們先看看PC端的

整個頁面看起來東西很多很複雜，其實不是的，只要你劃分好了模組，然後一個一個去開發，整個頁面結構夠清晰，你會發現書寫這些並不複雜。看天貓PC端，在不考慮可點開的那些，這個頁面也沒什麼東西。

在我們拿到設計稿之後，心裡要先把這個頁面劃分好多大的塊，這些塊之間互不干擾，不管是定位也好，還是浮動也好，這些塊都做自己的佈局。頭部、logo、內容、右側懸浮。先分成四個塊，這些塊之間是不會有任何關聯。

頭部、logo、內容、直接都寬度百分百，任何懸浮的直接定位最右邊，這幾個塊劃分完了就獨自開發自己。劃分好了大塊，就開發裡面的小塊，頭部、logo、右側懸浮就不說了，看看內容這一塊。

說白了也是左右兩個塊，並沒有多少東西。任何給整個塊一個相對定位，那些顯示隱藏的東西絕對定位，那麼這個大塊內容也就這些。

再看看手機端的

手機端也是一樣，先劃分大塊，再細分小塊，這個頁面結構清晰。每一個大塊之間也完全沒有耦合。

很不理解那些塊與塊之間有干擾的佈局，需要用margin來設定一個負數來調整距離。任何頁面，幾乎都是每一個大塊一個一個排列下去，真的要用到定位的時候，給自身的大塊設定相對定位relative，然後裡面的內容設定絕對定位absolute，這樣絕對定位的內容就以這個大塊為界限。

在書寫一些上下左右有距離的時候，不要一味的使用margin或者padding，兩者結合使用，更合理的去佈局。

寫靜態頁面真的很簡單，只要把整個塊劃分好了，使用合理的標籤，標籤巢狀合理，css多使用彈性佈局，往能最少程式碼量寫出合理佈局的方向去書寫。

歡迎關注 Coding個人筆記 公眾號