作為前端,靜態頁面很考驗一個css的功底,看一些大牛視訊書寫基礎靜態頁面的時候,非常舒服,因為整個頁面佈局的結構非常好,不僅語義化,每一個塊之間也分的很清楚。今天就講講頁面佈局怎麼去劃分結構。
以天貓為例,我們先看看PC端的
在我們拿到設計稿之後,心裡要先把這個頁面劃分好多大的塊,這些塊之間互不干擾,不管是定位也好,還是浮動也好,這些塊都做自己的佈局。頭部、logo、內容、右側懸浮。先分成四個塊,這些塊之間是不會有任何關聯。
頭部、logo、內容、直接都寬度百分百,任何懸浮的直接定位最右邊,這幾個塊劃分完了就獨自開發自己。劃分好了大塊,就開發裡面的小塊,頭部、logo、右側懸浮就不說了,看看內容這一塊。
再看看手機端的
很不理解那些塊與塊之間有干擾的佈局,需要用margin來設定一個負數來調整距離。任何頁面,幾乎都是每一個大塊一個一個排列下去,真的要用到定位的時候,給自身的大塊設定相對定位relative,然後裡面的內容設定絕對定位absolute,這樣絕對定位的內容就以這個大塊為界限。
在書寫一些上下左右有距離的時候,不要一味的使用margin或者padding,兩者結合使用,更合理的去佈局。
寫靜態頁面真的很簡單,只要把整個塊劃分好了,使用合理的標籤,標籤巢狀合理,css多使用彈性佈局,往能最少程式碼量寫出合理佈局的方向去書寫。
歡迎關注 Coding個人筆記 公眾號