網頁布局就是以最適合瀏覽的方式，將圖片、文字、動畫等按照一定規律遵循一定的形式美法則，放在不同位置。
按照定義方式分類
網頁布局方式分為固定式和響應式。
按照能否適應屏幕大小，構成的網頁原件的定義方式分為兩種，一種是像素型，另一種是百分比型。由不同網頁原件定義方式可構成不同的網頁布局形式，一種是按像素定義的固定式，另一種是按百分比定義的響應式。
1、固定式
把這種由像素定義原件的網頁布局方式稱為固定式，是因為網頁中的內容寬度是用像素這種絕對單位定義的，當把網頁窗口縮小時，界面會有一部分內容被遮擋，用戶需要瀏覽被遮擋的信息時，需要使用頁面下端的滾動條。這種網頁很常見，如站酷，簡書
2、自適應
自適應布局，即這些頁面內容是由百分比這種相對單位定義的，能夠隨著窗口顯示大小的比例來調整在頁面所占的比例大小，所以能夠適應多個終端，不同分辨率的屏幕，無論是手機、平板還是電腦，都能夠很好地適應，給用戶良好的體驗，就拿優設為例
按照頁面排版方式分類
網頁布局分為國字型，卡片式，瀑布流，海報型，標題正文型，綜合框架型
1、國字型
頁面上方有橫導航欄，側導航欄兩側分布，網頁最底端分布可點擊的超鏈接，適合內容豐富、信息量大的大型網站，如天貓，蘇寧易購
2、卡片式布局
導航欄一般為橫向或縱向，有的為隱藏式導航欄，導航欄一般有一個或兩個，網頁主要信息分成若干個等比例小方塊或者以這些小方塊拼合而成的方塊組成，一般為等距分布，這種布局多運用于設計類作品展示，或者一些多圖片的視頻網站，如dribbble、優酷
3、瀑布流
導航欄一般為橫向，突出搜索功能與圖片展示，一般應用于圖片素材網站，圖片不用放大加載就可以看到全貌，用戶可以更直觀地找到自己想要的信息，如花瓣網,pinterest
4、海報式
這種布局一般出現在一些時尚、個人、工作室網站的首頁，突出圖片，簡要的品牌logo形象周圍加文本鏈接進行點綴，真正做到少而精。這種布局處理得當會十分簡潔大氣、個性化。突出展示重要的產品或作品，給人耳目一新的感覺。如Zara,星巴克
5、標題正文型
一般是文章、登錄頁等采用，里面包含大量的文字信息，類似以PDF文檔，百度文庫，微信推送的文章，知乎里面的文章詳情均采用這種布局。是最為常見的布局方式，還有world文檔編輯的文本······
6、表格式布局
一般為檢索性或者導航信息網站，里面涵蓋大量的信息分類，便于查找信息，表格欄一般隱藏，如114網址導航
7、綜合框架型
包含上面介紹的部分布局方式，綜合信息比較多的，如中國青年網
總結
網頁布局分類方式很多，可以從版式布局切入，或者是由于實現工具的不同導致的布局變化樣式的差異導致的不同布局切入...手機上還有九宮格、豎排列表、全屏式....
