頁面佈局

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

以天貓爲例，咱們先看看PC端的

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

在咱們拿到設計稿以後，內心要先把這個頁面劃分好多大的塊，這些塊之間互不干擾，無論是定位也好，仍是浮動也好，這些塊都作本身的佈局。頭部、logo、內容、右側懸浮。先分紅四個塊，這些塊之間是不會有任何關聯。

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

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

再看看手機端的

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

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

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

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

歡迎關注 Coding我的筆記 公衆號